Template:LocaleDate: Difference between revisions

Template:LocaleDate (view source)

Revision as of 20:55, 3 February 2025

482 bytes added , 3 February

putting WIP JS code here for posterity

Iritscen

Bureaucrats, Interface administrators, Suppressors, Administrators

19,704

edits

@@ Line 1: / Line 1: @@
-<includeonly><templatestyles src="LocaleDate/styles.css" /><span class="date-wrapper"><span class="date-day">{{{day}}}</span><span class="date-month">{{{month}}}</span><span class="date-year">{{{year}}}</span></span></includeonly><noinclude>This template was an experiment in using [[Template:LocaleDate/styles.css|template CSS]] via the TemplateStyles extension to dynamically reformat dates as mdy or dmy based on the user's locale (the locale would need to be read via JavaScript, which would then set some CSS variables accordingly, but the JS code was never written). This hacky attempt failed because the validator used by TemplateStyles to safety-check the CSS does not allow CSS variables. Amazingly MediaWiki still lacks the ability for a template to directly read the user's locale.
+<includeonly><templatestyles src="LocaleDate/styles.css" /><span class="date-wrapper"><span class="date-day">{{{day}}}</span><span class="date-month">{{{month}}}</span><span class="date-year">{{{year}}}</span></span></includeonly><noinclude>This template was an experiment in using [[Template:LocaleDate/styles.css|template CSS]] via the TemplateStyles extension to dynamically reformat dates as mdy or dmy based on the user's locale*. This hacky attempt failed because the sanitizer used by TemplateStyles to safety-check the CSS does not allow CSS variables. Amazingly MediaWiki still lacks the ability for a template to directly read the user's locale.
+<nowiki>*</nowiki>The locale would need to be read via JavaScript, which would then set some CSS variables accordingly. The JS code was never written, but it would look something like:
+ function getLang() {
+  if (navigator.languages !== undefined)
+    return navigator.languages[0];
+  return navigator.language;
+ }
+ const lang = getLang();
+ const root = document.querySelector(':root');
+ if (lang == "en-US") {
+  root.style.setProperty('--month-order', '1');
+  root.style.setProperty('--day-order', '2');
+ } else {
+  root.style.setProperty('--month-order', '2');
+  root.style.setProperty('--day-order', '1');
+ }
 [[Category:Utility templates]]
 </noinclude>