feat: date time formats from locales

framework/core/js/src/common/Translator.tsx

@@ -1,3 +1,4 @@
+import type { Dayjs } from 'dayjs';
 import { RichMessageFormatter, mithrilRichHandler, NestedStringArray } from '@askvortsov/rich-icu-message-formatter';
 import { pluralTypeHandler, selectTypeHandler } from '@ultraq/icu-message-formatter';
 import username from './helpers/username';
@@ -88,4 +89,16 @@ export default class Translator {
 
     return id;
   }
+
+  /**
+   * Formats the time.
+   * 
+   * The format of the time will be chosen by the following order:
+   * - The format ID defined in current locale.
+   * - The provided fallback format.
+   * - DayJS default format.
+   */
+  format(time: Dayjs, id?: string, fallback?: string): string {
+    return time.format(id && (this.translations[id] ?? fallback));
+  }
 }

framework/core/js/src/common/index.ts

@@ -10,7 +10,7 @@ import 'bootstrap/js/transition';
 import 'jquery.hotkeys/jquery.hotkeys';
 
 import relativeTime from 'dayjs/plugin/relativeTime';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
+import localizedFormat from "dayjs/plugin/localizedFormat";
 
 dayjs.extend(relativeTime);
 dayjs.extend(localizedFormat);

framework/core/js/src/common/utils/humanTime.ts

@@ -1,3 +1,4 @@
+import app from '../app';
 import dayjs from 'dayjs';
 
 /**
@@ -15,17 +16,15 @@ export default function humanTime(time: dayjs.ConfigType): string {
     d = now;
   }
 
-  const day = 864e5;
-  const diff = d.diff(dayjs());
   let ago: string;
 
   // If this date was more than a month ago, we'll show the name of the month
   // in the string. If it wasn't this year, we'll show the year as well.
-  if (diff < -30 * day) {
-    if (d.year() === dayjs().year()) {
-      ago = d.format('D MMM');
+  if (d.diff(now, 'day') < -30) {
+    if (d.isSame(now, 'year')) {
+      ago = app.translator.format(d, 'core.lib.datetime_formats.human_time_short');
     } else {
-      ago = d.format('ll');
+      ago = app.translator.format(d, 'core.lib.datetime_formats.human_time_full');
     }
   } else {
     ago = d.fromNow();

framework/core/js/src/common/utils/liveHumanTimes.ts

@@ -10,7 +10,7 @@ function updateHumanTimes() {
 }
 
 /**
- * The `liveHumanTimes` initializer sets up a loop every 1 second to update
+ * The `liveHumanTimes` initializer sets up a loop every 10 seconds to update
  * timestamps rendered with the `humanTime` helper.
  */
 export default function liveHumanTimes() {

framework/core/js/src/forum/components/PostStream.js

@@ -270,7 +270,7 @@ export default class PostStream extends Component {
     // set the index to the last post.
     this.stream.index = indexFromViewPort !== null ? indexFromViewPort + 1 : this.stream.count();
     this.stream.visible = visible;
-    if (period) this.stream.description = dayjs(period).format('MMMM YYYY');
+    if (period) this.stream.description = app.translator.format(dayjs(period), 'core.lib.datetime_formats.post_stream_scrubber');
   }
 
   /**

framework/core/locale/core.yml

@@ -843,6 +843,12 @@ core:
     username:
       deleted_text: "[deleted]"
 
+    # These are DayJS formats used in core.
+    datetime_formats:
+      human_time_short: D MMM
+      human_time_full: ll
+      post_stream_scrubber: MMMM YYYY
+
   # Translations in this namespace are used in views other than Flarum's normal JS client.
   views:
     # Translations in this namespace are displayed by the basic HTML admin index.