feat(ui-date-input): improve DateInput2 api, extend docs #1640

balzss · 2024-08-15T13:42:14Z

/INSTUI-4219

this PR simplifies and improves the DateInput2 api

the docs are also extended to address the experimental nature of the component and elaborate on usage

test plan:

try the following things in a couple different locales (e.g. it-it, ar-eg, pt-br)

try setting a date by typing it in manually and blurring the input
try selecting a date from the picker
check if the picker shows the correct date after manually typing or selecting from the picker and closing it
try the year picker: see if the correct year is selected after closing or typing the date manually
check the custom date validation, customize it and see if it works as expected
test the default validation: try setting an invalid date
try the date formatting: modify the example and see if it works as expected

github-actions · 2024-08-15T13:48:07Z

PR Preview Action v1.4.8
Preview removed because the pull request was closed.
2024-09-23 09:55 UTC

joyenjoyer · 2024-08-22T13:40:10Z

packages/ui-date-input/src/DateInput2/README.md

@@ -2,28 +2,37 @@
 describes: DateInput2
 ---

-This component is an updated version of [`DateInput`](/#DateInput) that's easier to configure for developers, has a better UX, better accessibility features and a year picker. We recommend using this instead of `DateInput` which will be deprecated in the future.
+`DateInput2` is an experimental upgrade to the existing [`DateInput`](/#DateInput) component, offering easier configuration, better UX, improved accessibility, and a year picker. While it addresses key limitations of `DateInput`, it's still in the experimental phase, with some missing unit tests and potential (though unlikely) API changes. `DateInput` will be deprecated in the future, but for now, developers can start using `DateInput2` and provide feedback.


I would not expose this information to the public: whether we have unit tests or not.

I think we can disclose this for experimental components

matyasf · 2024-08-23T12:59:55Z

packages/ui-date-input/src/DateInput2/props.ts

@@ -45,9 +45,9 @@ type DateInput2OwnProps = {
    nextMonthButton: string
  }
  /**
-   * Specifies the input value.
+   * Specifies the input value *before* formatting. The `formatDate` will be applied to it before displaying. Should be a valid, parsable date.


I would mention here what a parseable date is, e.g. link this https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format

that would be a good addition

matyasf

There is some weirdness going on with date parsing. I got these settings:

locale="hu-hu"
timezone="Australia/Sydney"

When I select say 10th August in the Calendar dropdown the first example will display:

UTC Date String: 2024-08-09T14:00:00.000Z
Input Value: 2024. augusztus 10.

Which is OK I guess, selecting 10th August (midnight) in Australia is 9th August in London.

But if I enter into this DateInput: 2024-08-10 and focus out, it treats the entered date as UTC:

UTC Date String: 2024-08-10T00:00:00.000Z
Input Value: 2024. augusztus 10.

matyasf · 2024-08-23T13:40:43Z

Also watch out Date's parser is so broken that its scary. From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format : "When the time zone offset is absent, date-only forms are interpreted as a UTC time and date-time forms are interpreted as local time." Either use Moment's or make 100% sure that we always add timezone offset

balzss · 2024-08-26T10:27:26Z

Also watch out Date's parser is so broken that its scary. From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format : "When the time zone offset is absent, date-only forms are interpreted as a UTC time and date-time forms are interpreted as local time." Either use Moment's or make 100% sure that we always add timezone offset

I think adding the timezone offset everywhere is the right solution here and that would solve the bug you mention above too

matyasf · 2024-09-17T18:15:10Z

Some funky locale bugs:

Set locale to ar (Arabic), and I think that a slash is in the wrong place, it puts 7‏/1‏/2025 in the text input field (ISO date is 2025-01-06T23:00:00.000Z)
Set locale to bg (Bulgarian) or fa (Persian), select a date in the calendar, click on the textfield, then click out. It will display invalid date.
You can check here what Canvas supports: https://community.canvaslms.com/t5/Canvas-Basics-Guide/Which-languages-does-Canvas-support/ta-p/19

In the "with year picker" example I can move forward with the arrows to feb. 2025. Here the year picker will be empty. Same if I enter a date after 2024 manually. I dont have a good solution for this besides implementing some min/max prop.

balzss · 2024-09-17T23:02:49Z

Some funky locale bugs:

Set locale to ar (Arabic), and I think that a slash is in the wrong place, it puts 7‏/1‏/2025 in the text input field (ISO date is 2025-01-06T23:00:00.000Z) Set locale to bg (Bulgarian) or fa (Persian), select a date in the calendar, click on the textfield, then click out. It will display invalid date. You can check here what Canvas supports: https://community.canvaslms.com/t5/Canvas-Basics-Guide/Which-languages-does-Canvas-support/ta-p/19

In the "with year picker" example I can move forward with the arrows to feb. 2025. Here the year picker will be empty. Same if I enter a date after 2024 manually. I dont have a good solution for this besides implementing some min/max prop.

arabic and persian locales should work but you have to switch the example to be displayed right to left
bulgarian locale is tricky and I haven't found a good solution but fortunately it is not on the supported list that you've linked
for the yearpicker limit: I'll try to think about a good solution

packages/ui-date-input/src/DateInput2/README.md

matyasf · 2024-09-20T13:57:33Z

packages/ui-date-input/src/DateInput2/README.md

+
+Any of the following separators can be used when typing a date: `,`, `-`, `.`, `/` or a whitespace however on blur the date will be formatted according to the locale and separators will be changed and leading zeros also adjusted.
+
+If you want different parsing and formatting then the current locale you can use the `dateFormat` prop which accepts either a string with a name of a different locale (so you can use US date format even if the user is France) or a parser and formatter functions.


Its not clear for me from this how the Dateformat prop as string differs from the locale prop. I would make a new paragraph for these where I would also write about how it gets calculated. You can reuse it from DateTimeInput:

"Localization
The component is localized via its locale and timezone parameters. Both are read from props, context and from the browser's locale in this priority order. locale determines the language and format dates and time are displayed in (e.g. month names, AM/PM or 24-hour format) and the beginning of the week (e.g. Monday in Germany, Sunday in the U.S.) in the dropdown calendar."

matyasf · 2024-09-20T14:03:10Z

packages/ui-date-input/src/DateInput2/README.md

+            // split input on '.', whitespace, '/', ',' or '-' using regex: /[.\s/.-]+/
+            // the '+' allows splitting on consecutive delimiters
+            const [year, month, day] = input.split(/[,.\s/.-]+/)
+            const newDate = new Date(year, month-1, day)


This is interpreted in local time. I think it could lead to bugs if the component uses a different timezone -- it might return a date a day before/after?

might be true, I will check that

packages/ui-date-input/src/DateInput2/index.tsx

matyasf

nice work!

balzss self-assigned this Aug 15, 2024

balzss force-pushed the feat/dateinput2-api-change branch 2 times, most recently from a7b3b8c to 42c83a2 Compare August 21, 2024 15:03

balzss changed the title ~~WIP(ui-date-input): wip~~ feat(ui-date-input): improve DateInput2 api, extend docs Aug 21, 2024

balzss requested review from matyasf, HerrTopi and joyenjoyer and removed request for HerrTopi August 21, 2024 15:07

joyenjoyer reviewed Aug 22, 2024

View reviewed changes

joyenjoyer approved these changes Aug 22, 2024

View reviewed changes

matyasf reviewed Aug 23, 2024

View reviewed changes

matyasf requested changes Aug 23, 2024

View reviewed changes

balzss force-pushed the feat/dateinput2-api-change branch 2 times, most recently from 886c0bb to 92c6449 Compare September 16, 2024 13:44

balzss requested review from matyasf and git-nandor September 16, 2024 14:05

balzss force-pushed the feat/dateinput2-api-change branch 2 times, most recently from 1490704 to 0f310ef Compare September 17, 2024 13:22

balzss force-pushed the feat/dateinput2-api-change branch from 0f310ef to 5304c56 Compare September 17, 2024 22:59

balzss force-pushed the feat/dateinput2-api-change branch 3 times, most recently from b966e59 to 7b3867a Compare September 19, 2024 21:20

matyasf reviewed Sep 20, 2024

View reviewed changes

packages/ui-date-input/src/DateInput2/README.md Outdated Show resolved Hide resolved

matyasf reviewed Sep 20, 2024

View reviewed changes

packages/ui-date-input/src/DateInput2/index.tsx Outdated Show resolved Hide resolved

matyasf reviewed Sep 20, 2024

View reviewed changes

packages/ui-date-input/src/DateInput2/index.tsx Show resolved Hide resolved

balzss force-pushed the feat/dateinput2-api-change branch 3 times, most recently from 509e102 to fe75f11 Compare September 22, 2024 21:23

feat(ui-date-input): improve DateInput2 api, extend docs

ed2b141

balzss force-pushed the feat/dateinput2-api-change branch from fe75f11 to ed2b141 Compare September 23, 2024 09:14

matyasf approved these changes Sep 23, 2024

View reviewed changes

balzss mentioned this pull request Sep 23, 2024

feat(ui-calendar,ui-date-input): update DateInput2 api, add placeholder hint #1693

Merged

balzss merged commit f369604 into v9_maintenance Sep 23, 2024
6 checks passed

balzss deleted the feat/dateinput2-api-change branch September 23, 2024 09:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui-date-input): improve DateInput2 api, extend docs #1640

feat(ui-date-input): improve DateInput2 api, extend docs #1640

balzss commented Aug 15, 2024 •

edited

Loading

github-actions bot commented Aug 15, 2024 •

edited

Loading

joyenjoyer Aug 22, 2024

balzss Aug 22, 2024

matyasf Aug 23, 2024

balzss Aug 26, 2024

matyasf left a comment

matyasf commented Aug 23, 2024

balzss commented Aug 26, 2024

matyasf commented Sep 17, 2024 •

edited

Loading

balzss commented Sep 17, 2024 •

edited

Loading

matyasf Sep 20, 2024

matyasf Sep 20, 2024

balzss Sep 20, 2024

matyasf left a comment


		Any of the following separators can be used when typing a date: `,`, `-`, `.`, `/` or a whitespace however on blur the date will be formatted according to the locale and separators will be changed and leading zeros also adjusted.

		If you want different parsing and formatting then the current locale you can use the `dateFormat` prop which accepts either a string with a name of a different locale (so you can use US date format even if the user is France) or a parser and formatter functions.

feat(ui-date-input): improve DateInput2 api, extend docs #1640

feat(ui-date-input): improve DateInput2 api, extend docs #1640

Conversation

balzss commented Aug 15, 2024 • edited Loading

github-actions bot commented Aug 15, 2024 • edited Loading

joyenjoyer Aug 22, 2024

Choose a reason for hiding this comment

balzss Aug 22, 2024

Choose a reason for hiding this comment

matyasf Aug 23, 2024

Choose a reason for hiding this comment

balzss Aug 26, 2024

Choose a reason for hiding this comment

matyasf left a comment

Choose a reason for hiding this comment

matyasf commented Aug 23, 2024

balzss commented Aug 26, 2024

matyasf commented Sep 17, 2024 • edited Loading

balzss commented Sep 17, 2024 • edited Loading

matyasf Sep 20, 2024

Choose a reason for hiding this comment

matyasf Sep 20, 2024

Choose a reason for hiding this comment

balzss Sep 20, 2024

Choose a reason for hiding this comment

matyasf left a comment

Choose a reason for hiding this comment

balzss commented Aug 15, 2024 •

edited

Loading

github-actions bot commented Aug 15, 2024 •

edited

Loading

matyasf commented Sep 17, 2024 •

edited

Loading

balzss commented Sep 17, 2024 •

edited

Loading