From f11123b0a2f80a4188c10a6ef37c82f0184138d0 Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Mon, 20 Jun 2022 18:41:23 +0200 Subject: [PATCH 1/6] Pass custom formatters to `react-calendar` --- .../src/components/form/dateTime/datePicker.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/story-editor/src/components/form/dateTime/datePicker.js b/packages/story-editor/src/components/form/dateTime/datePicker.js index 91ebd020d0a6..158a5f1e20ff 100644 --- a/packages/story-editor/src/components/form/dateTime/datePicker.js +++ b/packages/story-editor/src/components/form/dateTime/datePicker.js @@ -29,6 +29,7 @@ import styled from 'styled-components'; import PropTypes from 'prop-types'; import { _x } from '@googleforcreators/i18n'; import { CircularProgress } from '@googleforcreators/design-system'; +import { format, formatDate } from '@googleforcreators/date'; /** * Internal dependencies @@ -150,6 +151,13 @@ function DatePicker({ currentDate, onChange, onViewChange }) { 'This label can apply to month, year and/or decade', 'web-stories' )} + formatDay={(locale, date) => format(date, 'd')} + formatWeekday={(locale, date) => format(date, 'l')} + formatLongDate={(locale, date) => formatDate(date)} + formatMonth={(locale, date) => format(date, 'F')} + formatMonthYear={(locale, date) => format(date, 'F Y')} + formatShortWeekday={(locale, date) => format(date, 'D')} + formatYear={(locale, date) => format(date, 'Y')} /> From 8941a969a9a7df587ad0bac5a70079557db5865d Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Fri, 24 Jun 2022 17:33:35 +0200 Subject: [PATCH 2/6] Lint fix --- .../story-editor/src/components/form/dateTime/datePicker.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/story-editor/src/components/form/dateTime/datePicker.js b/packages/story-editor/src/components/form/dateTime/datePicker.js index 3870c051135c..5803fef04048 100644 --- a/packages/story-editor/src/components/form/dateTime/datePicker.js +++ b/packages/story-editor/src/components/form/dateTime/datePicker.js @@ -28,9 +28,8 @@ import { import styled from 'styled-components'; import PropTypes from 'prop-types'; import { _x } from '@googleforcreators/i18n'; -import { getOptions } from '@googleforcreators/date'; +import { getOptions, format, formatDate } from '@googleforcreators/date'; import { CircularProgress } from '@googleforcreators/design-system'; -import { format, formatDate } from '@googleforcreators/date'; /** * Internal dependencies From 39389906c793c3b3752654b15283721712517808 Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Fri, 24 Jun 2022 17:33:51 +0200 Subject: [PATCH 3/6] No leading zeros --- .../story-editor/src/components/form/dateTime/datePicker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/story-editor/src/components/form/dateTime/datePicker.js b/packages/story-editor/src/components/form/dateTime/datePicker.js index 5803fef04048..9115e793c5de 100644 --- a/packages/story-editor/src/components/form/dateTime/datePicker.js +++ b/packages/story-editor/src/components/form/dateTime/datePicker.js @@ -154,7 +154,7 @@ function DatePicker({ currentDate, onChange, onViewChange }) { 'This label can apply to month, year and/or decade', 'web-stories' )} - formatDay={(locale, date) => format(date, 'd')} + formatDay={(locale, date) => format(date, 'j')} formatWeekday={(locale, date) => format(date, 'l')} formatLongDate={(locale, date) => formatDate(date)} formatMonth={(locale, date) => format(date, 'F')} From 73074f1453bb4d965d166e6dba10841cf608eb49 Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Fri, 24 Jun 2022 17:34:04 +0200 Subject: [PATCH 4/6] Change default date format to more reasonable one --- packages/date/src/settings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/date/src/settings.js b/packages/date/src/settings.js index b816104eeb0c..04b8b1d1a76d 100644 --- a/packages/date/src/settings.js +++ b/packages/date/src/settings.js @@ -15,7 +15,7 @@ */ export const DEFAULT_DATE_SETTINGS = { - dateFormat: 'Y-m-d', + dateFormat: 'F j, Y', timeFormat: 'g:i a', gmtOffset: 0, timezone: '', From acdd9a20b124330aaabcc5eba2cf30e78d893e43 Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Mon, 27 Jun 2022 13:18:54 +0200 Subject: [PATCH 5/6] Update test --- packages/date/src/test/getRelativeDisplayDate.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/date/src/test/getRelativeDisplayDate.js b/packages/date/src/test/getRelativeDisplayDate.js index 21599382ff56..14b11a5e4a6e 100644 --- a/packages/date/src/test/getRelativeDisplayDate.js +++ b/packages/date/src/test/getRelativeDisplayDate.js @@ -114,11 +114,12 @@ describe('date/getRelativeDisplayDate', () => { expect(formattedDate).toBe('yesterday'); }); - it('should return 2020-05-02 with no formatting options', () => { + // Uses DEFAULT_DATE_SETTINGS.dateFormat + it('should return May 2, 2020 with no formatting options', () => { const date = '2020-05-02T10:47:26'; const formattedDate = getRelativeDisplayDate(date); - expect(formattedDate).toBe('2020-05-02'); + expect(formattedDate).toBe('May 2, 2020'); }); it('should return May 2, 2020 with F j, Y formatting options', () => { From 94598f6d62b001ec492ab8b07382b0f308b7b541 Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Mon, 27 Jun 2022 13:30:42 +0200 Subject: [PATCH 6/6] Update formatDate test --- packages/date/src/test/formatDate.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/date/src/test/formatDate.js b/packages/date/src/test/formatDate.js index a986b073152b..d366c0abbf29 100644 --- a/packages/date/src/test/formatDate.js +++ b/packages/date/src/test/formatDate.js @@ -35,11 +35,12 @@ describe('date/formatDate', () => { resetSettings(); }); - it('should return 2020-05-02 with no formatting options', () => { + // Uses DEFAULT_DATE_SETTINGS.dateFormat + it('should return May 2, 2020 with no formatting options', () => { const dateString = '2020-05-02T10:47:26'; const formattedDate = formatDate(dateString); - expect(formattedDate).toBe('2020-05-02'); + expect(formattedDate).toBe('May 2, 2020'); }); it('should return "May 2, 2020" with "F j, Y" formatting options', () => {