Remove dateformat library usage (#7907). Fix #7904

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

CHANGELOG.txt

@@ -6,6 +6,7 @@ Changelog
 
 * Upgrade ESLint and Stylelint configurations to latest shared Wagtail configs (Thibaud Colas)
 * Major updates to frontend tooling; move Node tooling from Gulp to Webpack, upgrade to Node v16 and npm v8, eslint v8, stylelint v14 and others (Thibaud Colas)
+* Change comment headers’ date formatting to use browser APIs instead of requiring a library (LB (Ben Johnston))
 
 
 2.16 (xx.xx.xxxx) - IN DEVELOPMENT

client/src/components/CommentApp/components/CommentHeader/index.tsx

@@ -1,4 +1,3 @@
-import dateFormat from 'dateformat';
 import React, { FunctionComponent, useState, useEffect, useRef } from 'react';
 import Icon from '../../../Icon/Icon';
 import type { Store } from '../../state';
@@ -7,6 +6,12 @@ import { IS_IE11 } from '../../../../config/wagtailConfig';
 
 import { Author } from '../../state/comments';
 
+const dateOptions: Intl.DateTimeFormatOptions | any = {
+  dateStyle: 'medium',
+  timeStyle: 'short',
+};
+const dateTimeFormat = new Intl.DateTimeFormat([], dateOptions);
+
 // Details/Summary components that just become <details>/<summary> tags
 // except for IE11 where they become <div> tags to allow us to style them
 const Details: React.FunctionComponent<
@@ -134,6 +139,8 @@ export const CommentHeader: FunctionComponent<CommentHeaderProps> = ({
     };
   }, []);
 
+  const dateISO = new Date(date).toISOString();
+
   return (
     <div className="comment-header">
       <div className="comment-header__actions">
@@ -192,7 +199,7 @@ export const CommentHeader: FunctionComponent<CommentHeaderProps> = ({
       <span id={descriptionId}>
         <p className="comment-header__author">{author ? author.name : ''}</p>
         <p className="comment-header__date">
-          {dateFormat(date, 'd mmm yyyy HH:MM')}
+          <time dateTime={dateISO}>{dateTimeFormat.format(date)}</time>
         </p>
       </span>
     </div>

docs/releases/2.17.md

@@ -13,6 +13,7 @@
 
  * Upgrade ESLint and Stylelint configurations to latest shared Wagtail configs (Thibaud Colas)
  * Major updates to frontend tooling; move Node tooling from Gulp to Webpack, upgrade to Node v16 and npm v8, eslint v8, stylelint v14 and others (Thibaud Colas)
+ * Change comment headers’ date formatting to use browser APIs instead of requiring a library (LB (Ben Johnston))
 
 
 ### Bug fixes

package-lock.json

@@ -5,11 +5,9 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "wagtail",
       "version": "1.0.0",
       "dependencies": {
         "core-js": "^2.5.3",
-        "dateformat": "^2.2.0",
         "draft-js": "^0.10.5",
         "draftail": "^1.4.1",
         "draftjs-filters": "^2.5.0",
@@ -14125,14 +14123,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/dateformat": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-2.2.0.tgz",
-      "integrity": "sha1-QGXiATz5+5Ft39gu+1Bq1MZ2kGI=",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/debug": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@@ -40150,11 +40140,6 @@
         "whatwg-url": "^8.0.0"
       }
     },
-    "dateformat": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-2.2.0.tgz",
-      "integrity": "sha1-QGXiATz5+5Ft39gu+1Bq1MZ2kGI="
-    },
     "debug": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",

package.json

@@ -90,7 +90,6 @@
   },
   "dependencies": {
     "core-js": "^2.5.3",
-    "dateformat": "^2.2.0",
     "draft-js": "^0.10.5",
     "draftail": "^1.4.1",
     "draftjs-filters": "^2.5.0",