Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add fullDateWithWeekday, weekday and weekdayShort formatters #400

Merged
merged 11 commits into from
Jul 6, 2020
Merged

feat: Add fullDateWithWeekday, weekday and weekdayShort formatters #400

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
1486cc1
feat: Add fullDateWithWeekday, weekday and weekdayShort formatters
philipbulley Jun 25, 2020
34c388c
docs: Add fullDateWithWeekday, weekday and weekdayShort formatters
philipbulley Jun 25, 2020
273d031
docs: aligning DateIOFormats docs with test assertions (moment en-US)…
philipbulley Jun 25, 2020
fa7146a
Update README.md
philipbulley Jul 1, 2020
23090d4
Update Jalaali fullDateWithWeekday
philipbulley Jul 1, 2020
642e46d
chore: run prettier across all files
philipbulley Jul 1, 2020
b8c7e91
docs: remove ordinal from fullDateTime example, aligning with test as…
philipbulley Jul 1, 2020
48721be
docs: update keyboardDate* examples to better imply mm/dd/yyyy
philipbulley Jul 1, 2020
c9329de
Fix jalaali tests
dmtrKovalenko Jul 6, 2020
c5d249b
Merge branch 'master' into add-a11y-formats
dmtrKovalenko Jul 6, 2020
a0d1a1a
Add support of new format to date-fns-jalaali
dmtrKovalenko Jul 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 30 additions & 21 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# date-io

Abstraction over common javascript date management libraries.
Abstraction over common JavaScript date management libraries.

[![npm package](https://img.shields.io/npm/v/@date-io/core.svg)](https://www.npmjs.org/package/@date-io/core)
[![codecov](https://codecov.io/gh/dmtrKovalenko/date-io/branch/master/graph/badge.svg)](https://codecov.io/gh/dmtrKovalenko/date-io)
Expand All @@ -9,10 +9,10 @@ Abstraction over common javascript date management libraries.
[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

The project expose abstraction interface over [luxon](https://moment.github.io/luxon/), [date-fns v2](https://github.com/date-fns/date-fns), [dayjs](https://github.com/iamkun/dayjs) and [moment](https://momentjs.com/).
Which can be easily used by any ui date or time components to use the same date management lib as user's project use.
The project exposes an abstraction interface over [luxon](https://moment.github.io/luxon/), [date-fns v2](https://github.com/date-fns/date-fns), [dayjs](https://github.com/iamkun/dayjs) and [moment](https://momentjs.com/).
It allows you to build any UI date or time components, whilst utilizing the same date management library in use within your user's project.
philipbulley marked this conversation as resolved.
Show resolved Hide resolved

That simplifies timezones management, makes your code return exactly the same type that user expect and work with specific calendar systems (e.g. [Jalali calendar](https://en.wikipedia.org/wiki/Jalali_calendar))
It simplifies timezone management, allows your code to return the exact same type that your user expects and works with specific calendar systems (e.g. [Jalali calendar](https://en.wikipedia.org/wiki/Jalali_calendar))

### Projects

Expand Down Expand Up @@ -46,17 +46,22 @@ dateFns.format(updatedLuxonDate, "fullDateTime24h"); // "2018, October 30th 11:4

### Interface

Implemented interface for now. If you can not find needed method please let us know and we will add it!
The implemented interface. If you cannot find the method you require, please let us know, and we will add it!

Localized output will of course vary based on the locale and date library used. Inline examples here are based on using
`moment` with the `en-US` locale.

```ts
export interface DateIOFormats<TLibFormatToken = string> {
/** Localized full date, useful for accessibility @example "January 1st, 2019" */
/** Localized full date @example "Jan 1, 2019" */
fullDate: TLibFormatToken;
/** Date format string with month and day of month @example "01 January" */
/** Partially localized full date with weekday, useful for text-to-speech accessibility @example "Tuesday, January 1, 2019" */
fullDateWithWeekday: TLibFormatToken;
/** Date format string with month and day of month @example "1 January" */
normalDate: TLibFormatToken;
/** Date format string with weekday, month and day of month @example "Wed, Jan 1st" */
/** Date format string with weekday, month and day of month @example "Wed, Jan 1" */
normalDateWithWeekday: TLibFormatToken;
/** Shorter day format @example "1 January" */
/** Shorter day format @example "Jan 1" */
shortDate: TLibFormatToken;
/** Year format string @example "2019" */
year: TLibFormatToken;
Expand All @@ -66,37 +71,41 @@ export interface DateIOFormats<TLibFormatToken = string> {
monthShort: TLibFormatToken;
/** Short month format string @example "January 2018" */
monthAndYear: TLibFormatToken;
/** Month with date format string @example "January 1st" */
/** Month with date format string @example "January 1" */
monthAndDate: TLibFormatToken;
/** Day format string @example "12" */
/** Weekday format string @example "Wednesday" */
weekday: TLibFormatToken;
/** Short weekday format string @example "Wed" */
weekdayShort: TLibFormatToken;
/** Day format string @example "1" */
dayOfMonth: TLibFormatToken;
/** Hours format string @example "11" */
hours12h: TLibFormatToken;
/** Hours format string @example "23" */
hours24h: TLibFormatToken;
/** Minutes format string @example "59" */
/** Minutes format string @example "44" */
minutes: TLibFormatToken;
/** Seconds format string @example "59" */
/** Seconds format string @example "00" */
seconds: TLibFormatToken;
/** Full time localized format string @example "11:44 PM" for US, "23:44" for Europe */
fullTime: TLibFormatToken;
/** Not localized full time format string @example "11:44 PM" */
fullTime12h: TLibFormatToken;
/** Not localized full time format string @example "23:59" */
/** Not localized full time format string @example "23:44" */
fullTime24h: TLibFormatToken;
/** Date & time format string with localized time @example "2018, Jan 1st 11:44 PM" */
/** Date & time format string with localized time @example "Jan 1st, 2018 11:44 PM" */
fullDateTime: TLibFormatToken;
/** Not localized date & Time format 12h @example "2018, Jan 1st 11:44 PM" */
/** Not localized date & Time format 12h @example "Jan 1, 2018 11:44 PM" */
fullDateTime12h: TLibFormatToken;
/** Not localized date & Time format 24h @example "2018, Jan 1st 23:44" */
/** Not localized date & Time format 24h @example "Jan 1, 2018 23:44" */
fullDateTime24h: TLibFormatToken;
/** Localized keyboard input friendly date format @example "2019/01/01" */
/** Localized keyboard input friendly date format @example "02/01/2020 */
keyboardDate: TLibFormatToken;
/** Localized keyboard input friendly date/time format @example "2019/01/01 23:44" */
/** Localized keyboard input friendly date/time format @example "02/01/2020 23:44" */
keyboardDateTime: TLibFormatToken;
/** Not Localized keyboard input friendly date/time 12h format @example "2019/01/01 11:44 PM" */
/** Partially localized keyboard input friendly date/time 12h format @example "02/01/2020 11:44 PM" */
keyboardDateTime12h: TLibFormatToken;
/** Not localized keyboard input friendly date/time 24h format @example "2019/01/01 23:44" */
/** Partially localized keyboard input friendly date/time 24h format @example "02/01/2020 23:44" */
keyboardDateTime24h: TLibFormatToken;
}

Expand Down
78 changes: 42 additions & 36 deletions __tests__/formats.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ test.each`
${"year"} | ${"2020"}
${"month"} | ${"January"}
${"monthAndDate"} | ${"January 1"}
${"weekday"} | ${"Wednesday"}
${"weekdayShort"} | ${"Wed"}
${"dayOfMonth"} | ${"1"}
${"fullTime12h"} | ${"11:44 PM"}
${"fullTime24h"} | ${"23:44"}
Expand All @@ -36,15 +38,16 @@ test.each`

describe("Localized formats", () => {
test.each`
format | expectedWithEn | expectedWithRu
${"fullDate"} | ${"Feb 1, 2020"} | ${"1 февр. 2020 г."}
${"fullDateTime"} | ${"Feb 1, 2020 11:44 PM"} | ${"1 февр. 2020 г., 23:44"}
${"fullDateTime12h"} | ${"Feb 1, 2020 11:44 PM"} | ${"1 февр. 2020 г. 11:44 вечера"}
${"fullDateTime24h"} | ${"Feb 1, 2020 23:44"} | ${"1 февр. 2020 г. 23:44"}
${"keyboardDate"} | ${"02/01/2020"} | ${"01.02.2020"}
${"keyboardDateTime"} | ${"02/01/2020 11:44 PM"} | ${"01.02.2020 23:44"}
${"keyboardDateTime12h"} | ${"02/01/2020 11:44 PM"} | ${"01.02.2020 11:44 вечера"}
${"keyboardDateTime24h"} | ${"02/01/2020 23:44"} | ${"01.02.2020 23:44"}
format | expectedWithEn | expectedWithRu
${"fullDate"} | ${"Feb 1, 2020"} | ${"1 февр. 2020 г."}
${"fullDateWithWeekday"} | ${"Saturday, February 1, 2020"} | ${"суббота, 1 февраля 2020 г."}
${"fullDateTime"} | ${"Feb 1, 2020 11:44 PM"} | ${"1 февр. 2020 г., 23:44"}
${"fullDateTime12h"} | ${"Feb 1, 2020 11:44 PM"} | ${"1 февр. 2020 г. 11:44 вечера"}
${"fullDateTime24h"} | ${"Feb 1, 2020 23:44"} | ${"1 февр. 2020 г. 23:44"}
${"keyboardDate"} | ${"02/01/2020"} | ${"01.02.2020"}
${"keyboardDateTime"} | ${"02/01/2020 11:44 PM"} | ${"01.02.2020 23:44"}
${"keyboardDateTime12h"} | ${"02/01/2020 11:44 PM"} | ${"01.02.2020 11:44 вечера"}
${"keyboardDateTime24h"} | ${"02/01/2020 23:44"} | ${"01.02.2020 23:44"}
`("Moment localized $format", ({ format, expectedWithEn, expectedWithRu }) => {
const momentUtils = new MomentUtils({ instance: moment, locale: "en-US" });
const momentRuUtils = new MomentUtils({ instance: moment, locale: "ru" });
Expand All @@ -55,15 +58,16 @@ describe("Localized formats", () => {
});

test.each`
format | expectedWithEn | expectedWithRu
${"fullDate"} | ${"Feb 1, 2020"} | ${"1 февр. 2020 г."}
${"fullDateTime"} | ${"Feb 1, 2020 11:44 PM"} | ${"1 февр. 2020 г., 23:44"}
${"fullDateTime12h"} | ${"Feb 1, 2020 11:44 PM"} | ${"1 февр. 2020 г. 11:44 PM"}
${"fullDateTime24h"} | ${"Feb 1, 2020 23:44"} | ${"1 февр. 2020 г. 23:44"}
${"keyboardDate"} | ${"02/01/2020"} | ${"01.02.2020"}
${"keyboardDateTime"} | ${"02/01/2020 11:44 PM"} | ${"01.02.2020 23:44"}
${"keyboardDateTime12h"} | ${"02/01/2020 11:44 PM"} | ${"01.02.2020 11:44 PM"}
${"keyboardDateTime24h"} | ${"02/01/2020 23:44"} | ${"01.02.2020 23:44"}
format | expectedWithEn | expectedWithRu
${"fullDate"} | ${"Feb 1, 2020"} | ${"1 февр. 2020 г."}
${"fullDateWithWeekday"} | ${"Saturday, February 1, 2020"} | ${"суббота, 1 февраля 2020 г."}
${"fullDateTime"} | ${"Feb 1, 2020 11:44 PM"} | ${"1 февр. 2020 г., 23:44"}
${"fullDateTime12h"} | ${"Feb 1, 2020 11:44 PM"} | ${"1 февр. 2020 г. 11:44 PM"}
${"fullDateTime24h"} | ${"Feb 1, 2020 23:44"} | ${"1 февр. 2020 г. 23:44"}
${"keyboardDate"} | ${"02/01/2020"} | ${"01.02.2020"}
${"keyboardDateTime"} | ${"02/01/2020 11:44 PM"} | ${"01.02.2020 23:44"}
${"keyboardDateTime12h"} | ${"02/01/2020 11:44 PM"} | ${"01.02.2020 11:44 PM"}
${"keyboardDateTime24h"} | ${"02/01/2020 23:44"} | ${"01.02.2020 23:44"}
`("DayJS localized $format", ({ format, expectedWithEn, expectedWithRu }) => {
const dayjsUtils = new DayjsUtils({ locale: "en-US" });
const dayjsRuUtils = new DayjsUtils({ locale: "ru" });
Expand All @@ -74,15 +78,16 @@ describe("Localized formats", () => {
});

test.each`
format | expectedWithEn | expectedWithRu
${"fullDate"} | ${"Feb 1, 2020"} | ${"1 фев. 2020 г."}
${"fullDateTime"} | ${"Feb 1, 2020 11:44 PM"} | ${"1 фев. 2020 г. 23:44"}
${"fullDateTime12h"} | ${"Feb 1, 2020 11:44 PM"} | ${"1 фев. 2020 г. 11:44 ПП"}
${"fullDateTime24h"} | ${"Feb 1, 2020 23:44"} | ${"1 фев. 2020 г. 23:44"}
${"keyboardDate"} | ${"02/01/2020"} | ${"01.02.2020"}
${"keyboardDateTime"} | ${"02/01/2020 11:44 PM"} | ${"01.02.2020 23:44"}
${"keyboardDateTime12h"} | ${"02/01/2020 11:44 PM"} | ${"01.02.2020 11:44 ПП"}
${"keyboardDateTime24h"} | ${"02/01/2020 23:44"} | ${"01.02.2020 23:44"}
format | expectedWithEn | expectedWithRu
${"fullDate"} | ${"Feb 1, 2020"} | ${"1 фев. 2020 г."}
${"fullDateWithWeekday"} | ${"Saturday, February 1st, 2020"} | ${"суббота, 1-е февраля 2020 г."}
${"fullDateTime"} | ${"Feb 1, 2020 11:44 PM"} | ${"1 фев. 2020 г. 23:44"}
${"fullDateTime12h"} | ${"Feb 1, 2020 11:44 PM"} | ${"1 фев. 2020 г. 11:44 ПП"}
${"fullDateTime24h"} | ${"Feb 1, 2020 23:44"} | ${"1 фев. 2020 г. 23:44"}
${"keyboardDate"} | ${"02/01/2020"} | ${"01.02.2020"}
${"keyboardDateTime"} | ${"02/01/2020 11:44 PM"} | ${"01.02.2020 23:44"}
${"keyboardDateTime12h"} | ${"02/01/2020 11:44 PM"} | ${"01.02.2020 11:44 ПП"}
${"keyboardDateTime24h"} | ${"02/01/2020 23:44"} | ${"01.02.2020 23:44"}
`("Date-fns localized $format", ({ format, expectedWithEn, expectedWithRu }) => {
const dateFnsUtils = new DateFnsUtils();
const dateFnsRuUtils = new DateFnsUtils({ locale: ruDateFnsLocale });
Expand All @@ -93,15 +98,16 @@ describe("Localized formats", () => {
});

test.each`
format | expectedWithEn | expectedWithRu
${"fullDate"} | ${"Feb 1, 2020"} | ${"1 февр. 2020 г."}
${"fullDateTime"} | ${"Feb 1, 2020, 11:44 PM"} | ${"1 февр. 2020 г., 23:44"}
${"fullDateTime12h"} | ${"Feb 1, 2020, 11:44 PM"} | ${"1 февр. 2020 г., 11:44 PM"}
${"fullDateTime24h"} | ${"Feb 1, 2020, 23:44"} | ${"1 февр. 2020 г., 23:44"}
${"keyboardDate"} | ${"2/1/2020"} | ${"01.02.2020"}
${"keyboardDateTime"} | ${"2/1/2020 11:44 PM"} | ${"01.02.2020 23:44"}
${"keyboardDateTime12h"} | ${"2/1/2020 11:44 PM"} | ${"01.02.2020 11:44 PM"}
${"keyboardDateTime24h"} | ${"2/1/2020 23:44"} | ${"01.02.2020 23:44"}
format | expectedWithEn | expectedWithRu
${"fullDate"} | ${"Feb 1, 2020"} | ${"1 февр. 2020 г."}
${"fullDateWithWeekday"} | ${"Saturday, February 1, 2020"} | ${"суббота, 1 февраля 2020 г."}
${"fullDateTime"} | ${"Feb 1, 2020, 11:44 PM"} | ${"1 февр. 2020 г., 23:44"}
${"fullDateTime12h"} | ${"Feb 1, 2020, 11:44 PM"} | ${"1 февр. 2020 г., 11:44 PM"}
${"fullDateTime24h"} | ${"Feb 1, 2020, 23:44"} | ${"1 февр. 2020 г., 23:44"}
${"keyboardDate"} | ${"2/1/2020"} | ${"01.02.2020"}
${"keyboardDateTime"} | ${"2/1/2020 11:44 PM"} | ${"01.02.2020 23:44"}
${"keyboardDateTime12h"} | ${"2/1/2020 11:44 PM"} | ${"01.02.2020 11:44 PM"}
${"keyboardDateTime24h"} | ${"2/1/2020 23:44"} | ${"01.02.2020 23:44"}
`("Luxon localized $format", ({ format, expectedWithEn, expectedWithRu }) => {
const luxonUtils = new LuxonUtils({ locale: "en" });
const luxonRuUtils = new LuxonUtils({ locale: "ru" });
Expand Down
51 changes: 27 additions & 24 deletions __tests__/hijri.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,15 +91,15 @@ describe("Hijri", () => {
const date = hijriiUtils.date(TEST_TIMESTAMP);
const array = hijriiUtils.getWeekArray(date);

expect(array.map(innerArray => innerArray.map(dt => dt.toISOString()))).toEqual([
expect(array.map((innerArray) => innerArray.map((dt) => dt.toISOString()))).toEqual([
[
"2018-10-07T00:00:00.000Z",
"2018-10-08T00:00:00.000Z",
"2018-10-09T00:00:00.000Z",
"2018-10-10T00:00:00.000Z",
"2018-10-11T00:00:00.000Z",
"2018-10-12T00:00:00.000Z",
"2018-10-13T00:00:00.000Z"
"2018-10-13T00:00:00.000Z",
],
[
"2018-10-14T00:00:00.000Z",
Expand All @@ -108,7 +108,7 @@ describe("Hijri", () => {
"2018-10-17T00:00:00.000Z",
"2018-10-18T00:00:00.000Z",
"2018-10-19T00:00:00.000Z",
"2018-10-20T00:00:00.000Z"
"2018-10-20T00:00:00.000Z",
],
[
"2018-10-21T00:00:00.000Z",
Expand All @@ -117,7 +117,7 @@ describe("Hijri", () => {
"2018-10-24T00:00:00.000Z",
"2018-10-25T00:00:00.000Z",
"2018-10-26T00:00:00.000Z",
"2018-10-27T00:00:00.000Z"
"2018-10-27T00:00:00.000Z",
],
[
"2018-10-28T00:00:00.000Z",
Expand All @@ -126,7 +126,7 @@ describe("Hijri", () => {
"2018-10-31T00:00:00.000Z",
"2018-11-01T00:00:00.000Z",
"2018-11-02T00:00:00.000Z",
"2018-11-03T00:00:00.000Z"
"2018-11-03T00:00:00.000Z",
],
[
"2018-11-04T00:00:00.000Z",
Expand All @@ -135,8 +135,8 @@ describe("Hijri", () => {
"2018-11-07T00:00:00.000Z",
"2018-11-08T00:00:00.000Z",
"2018-11-09T00:00:00.000Z",
"2018-11-10T00:00:00.000Z"
]
"2018-11-10T00:00:00.000Z",
],
]);
});

Expand Down Expand Up @@ -167,23 +167,26 @@ describe("Hijri", () => {
});

test.each`
format | expected
${"fullDate"} | ${"١٤٤١، جمادى الأولى ١"}
${"normalDate"} | ${"الأربعاء، ٦ جمادى ١"}
${"shortDate"} | ${"٦ جمادى ١"}
${"year"} | ${"١٤٤١"}
${"month"} | ${"جمادى الأولى"}
${"monthAndDate"} | ${"٦ جمادى الأولى"}
${"dayOfMonth"} | ${"٦"}
${"fullTime12h"} | ${"١١:٤٤ م"}
${"fullTime24h"} | ${"٢٣:٤٤"}
${"hours12h"} | ${"١١"}
${"hours24h"} | ${"٢٣"}
${"minutes"} | ${"٤٤"}
${"seconds"} | ${"٠٠"}
${"fullDateTime12h"} | ${"٦ جمادى الأولى ١١:٤٤ م"}
${"fullDateTime24h"} | ${"٦ جمادى الأولى ٢٣:٤٤"}
`("Correctly formats jalaali format $format", ({ format, expected }) => {
format | expected
${"fullDate"} | ${"١٤٤١، جمادى الأولى ١"}
${"fullDateWithWeekday"} | ${"١٤٤١، جمادى الأولى ١، الأربعاء"}
${"normalDate"} | ${"الأربعاء، ٦ جمادى ١"}
${"shortDate"} | ${"٦ جمادى ١"}
${"year"} | ${"١٤٤١"}
${"month"} | ${"جمادى الأولى"}
${"monthAndDate"} | ${"٦ جمادى الأولى"}
${"weekday"} | ${"الأربعاء"}
${"weekdayShort"} | ${"أربعاء"}
${"dayOfMonth"} | ${"٦"}
${"fullTime12h"} | ${"١١:٤٤ م"}
${"fullTime24h"} | ${"٢٣:٤٤"}
${"hours12h"} | ${"١١"}
${"hours24h"} | ${"٢٣"}
${"minutes"} | ${"٤٤"}
${"seconds"} | ${"٠٠"}
${"fullDateTime12h"} | ${"٦ جمادى الأولى ١١:٤٤ م"}
${"fullDateTime24h"} | ${"٦ جمادى الأولى ٢٣:٤٤"}
`("Correctly formats Hijri format $format", ({ format, expected }) => {
const date = hijriiUtils.date("2020-01-01T23:44:00.000Z");

expect(hijriiUtils.format(date as any, format)).toBe(expected);
Expand Down
Loading