[1.x] feat: allow to customize time formats through translations (#4053)

* Allow to customize time formats

* Fix CS

Author: rob006

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

@@ -1,4 +1,6 @@
+import app from '../../common/app';
 import dayjs from 'dayjs';
+import extractText from './extractText';
 
 /**
  * The `humanTime` utility converts a date to a localized, human-readable time-
@@ -23,9 +25,9 @@ export default function humanTime(time: dayjs.ConfigType): string {
   // 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');
+      ago = d.format(extractText(app.translator.trans('core.lib.datetime_formats.humanTimeShort')));
     } else {
-      ago = d.format('ll');
+      ago = d.format(extractText(app.translator.trans('core.lib.datetime_formats.humanTimeLong')));
     }
   } else {
     ago = d.fromNow();

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

@@ -5,6 +5,7 @@ import PostLoading from './LoadingPost';
 import ReplyPlaceholder from './ReplyPlaceholder';
 import Button from '../../common/components/Button';
 import ItemList from '../../common/utils/ItemList';
+import extractText from '../../common/utils/extractText';
 
 /**
  * The `PostStream` component displays an infinitely-scrollable wall of posts in
@@ -292,7 +293,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 = dayjs(period).format(extractText(app.translator.trans('core.lib.datetime_formats.scrubber')));
   }
 
   /**

framework/core/locale/core.yml

@@ -655,6 +655,12 @@ core:
       kilo_text: K
       mega_text: M
 
+    # These translations are used for formatting dates using dayjs.
+    datetime_formats:
+      humanTimeShort: D MMM
+      humanTimeLong: ll
+      scrubber: MMMM YYYY
+
     # These translations are used to punctuate a series of items.
     series:
       glue_text: ", "