guess who wants to see AM/PM in their datepickers

lichess-org · Sep 24, 2024 · de5b3e8 · de5b3e8
1 parent e403d21
commit de5b3e8
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 2 deletions.
diff --git a/ui/bits/src/bits.flatpickr.ts b/ui/bits/src/bits.flatpickr.ts
@@ -1,4 +1,5 @@
 import flatpickr from 'flatpickr';
+import { use24h } from 'common/i18n';
 
 site.load.then(() => {
   $('.flatpickr').each(function(this: HTMLInputElement) {
@@ -11,6 +12,7 @@ site.load.then(() => {
       maxDate: new Date(Date.now() + 1000 * 3600 * 24 * 31 * 12),
       monthSelectorType: 'static',
       disableMobile: true, // https://flatpickr.js.org/mobile-support/ https://github.com/lichess-org/lila/issues/8110
+      time_24hr: use24h(),
       ...config,
     });
   });

diff --git a/ui/bits/src/bits.tourForm.ts b/ui/bits/src/bits.tourForm.ts
@@ -1,4 +1,5 @@
 import flatpickr from 'flatpickr';
+import { use24h } from 'common/i18n';
 
 site.load.then(() => {
   const $variant = $('#form3-variant'),
@@ -17,6 +18,7 @@ site.load.then(() => {
       altFormat: 'Y-m-d h:i K',
       monthSelectorType: 'static',
       disableMobile: true,
+      time_24hr: use24h(),
     });
   });
 });
diff --git a/ui/common/src/i18n.ts b/ui/common/src/i18n.ts
@@ -34,13 +34,15 @@ export const displayLocale: string = document.documentElement.lang.startsWith('a
   ? 'ar-ly'
   : document.documentElement.lang;;
 
-export const commonDateFormat: (d?: Date|number) => string = new Intl.DateTimeFormat(displayLocale, {
+const commonDateFormatter = new Intl.DateTimeFormat(displayLocale, {
   year: 'numeric',
   month: 'short',
   day: 'numeric',
   hour: 'numeric',
   minute: 'numeric',
-}).format;
+});
+
+export const commonDateFormat: (d?: Date|number) => string = commonDateFormatter.format;
 
 export const timeago: (d: DateLike) => string =
   (date: DateLike) => formatAgo((Date.now() - toDate(date).getTime()) / 1000);
@@ -49,6 +51,9 @@ export const timeago: (d: DateLike) => string =
 export const toDate = (input: DateLike): Date =>
   input instanceof Date ? input : new Date(isNaN(input as any) ? input : parseInt(input as any));
 
+export const use24h = (): boolean =>
+  !new Intl.DateTimeFormat(displayLocale).resolvedOptions().hour12;
+
 // format the diff second to *** time ago
 export const formatAgo = (seconds: number): string => {
   const absSeconds = Math.abs(seconds);

diff --git a/ui/swiss/src/view/main.ts b/ui/swiss/src/view/main.ts
@@ -12,6 +12,7 @@ import * as boards from './boards';
 import podium from './podium';
 import playerInfo from './playerInfo';
 import flatpickr from 'flatpickr';
+import { use24h } from 'common/i18n';
 import { once } from 'common/storage';
 import { initMiniGames } from 'common/miniBoard';
 import { watchers } from 'common/watchers';
@@ -107,6 +108,7 @@ function nextRound(ctrl: SwissCtrl): VNode | undefined {
             onClose() {
               (el.parentNode as HTMLFormElement).submit();
             },
+            time_24hr: use24h(),
           }),
         ),
       }),