dcc redesign: DatePickerSingle and DatePickerRange

[KoolADE85]

At long last, here is a PR to modernize the date pickers.

You can play with them here:
https://dcc-redesign.plotly.app/datepickers-single
https://dcc-redesign.plotly.app/datepickers-range

Some improvements:

• Consistent with dcc.Dropdown's look and feel
• Keyboard accessible with focus carefully managed
• Support for mouse drag & wheel (and click of course)
• DatePickerRange supports selecting backwards as well as forwards
• A range of tests added for both new and existing features.

Closes #3391
Fixes https://github.com/plotly/dash-design-kit/issues/1504

[AnnMarieW]

Wow! First look at this is amazing 🤩

I love how you can easily skip months and years - that's been a pain point in the old date pickers for a long time.

This is an incredible amount of work given that the Radix components does not have date pickers and you had to build all of this from scratch.

I see you are still using moment.js for the date formatting. Since they are no longer recommending moment.js to be used in new project, would you consider using one of their recommended alternatives? It might make it easier to add support for locale at some point https://momentjs.com/docs/#/-project-status/

[KoolADE85]

Thanks @AnnMarieW ! And wow, I did not realize moment was fading away like that! I will take a look at replacing moment - it shouldn't be too much effort there.

Wow! First look at this is amazing 🤩

I love how you can easily skip months and years - that's been a pain point in the old date pickers for a long time.

This is an incredible amount of work given that the Radix components does not have date pickers and you had to build all of this from scratch.

I see you are still using moment.js for the date formatting. Since they are no longer recommending moment.js to be used in new project, would you consider using one of their recommended alternatives? It might make it easier to add support for locale at some point https://momentjs.com/docs/#/-project-status/

[T4rk1n]

Looks good.

[T4rk1n]

I see you are still using moment.js for the date formatting. Since they are no longer recommending moment.js

I would also recommend we change to something else, I don't think we use that much moment.js. Luxon seems like a good alternative, I also had a good experience with date-fns before.

[KoolADE85]

I see you are still using moment.js for the date formatting. Since they are no longer recommending moment.js

I would also recommend we change to something else, I don't think we use that much moment.js. Luxon seems like a good alternative, I also had a good experience with date-fns before.

Oh nice, date-fns looks super lightweight, I'll give it a try!
Just want to call out... we document moment-style formatting for props like display_format and month_format. I guess in the interest of backwards-compatibility, I will write something that maps moment-style formats to date-fns-style (😒)

[AnnMarieW]

Sorry to comment on this after you already moved to date-fns, but just wanted to check if it's possible to add locales from a dash app with date-fns?

For example with day.js you can add different locales with a script. I didn't see an option to do that with date-fns without bundling the locales in the component.

scripts = [
    "https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js",      # dayjs  
    "https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/locale/fr.min.js",  # french locale
]

app = Dash(external_scripts=scripts)

Also, the day.js has a syntax that is more like moment so you may not have to write scripts for those format props.

[KoolADE85]

Sorry to comment on this after you already moved to date-fns, but just wanted to check if it's possible to add locales from a dash app with date-fns?

For example with day.js you can add different locales with a script. I didn't see an option to do that with date-fns without bundling the locales in the component.

scripts = [
    "https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js",      # dayjs  
    "https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/locale/fr.min.js",  # french locale
]

app = Dash(external_scripts=scripts)

Also, the day.js has a syntax that is more like moment so you may not have to write scripts for those format props.

Excellent call @AnnMarieW ! It does support adding locales like that (or from the assets folder). However, I neglected to add the code that would make use of it! This is now added, along with a test.

@ndrezn
I think this qualifies as a "API change" for the DatePicker, so just want to run it past you. With this approach, if users want a localized calendar, they will need to provide an external script that provides the translations (e.g. https://cdn.jsdelivr.net/npm/[email protected]/locale/fr/cdn.min.js for French) or to put the script in their assets folder.
I don't think it's a big deal, but want to run it past you since non-English apps will need to perform this additional step when upgrading to the new components.

[AnnMarieW]

Wow - that's so awesome that you included the locale now. I just wanted to make sure it was possible to add at some point since this has been a frequently requested feature.

I think it's OK to document how to add the extra script, since this is a new feature.

[KoolADE85]

Wow - that's so awesome that you included the locale now. I just wanted to make sure it was possible to add at some point since this has been a frequently requested feature.

I think it's OK to document how to add the extra script, since this is a new feature.

oh that's great then! For some reason, I had thought that moment.js had translations bundled in and handled them automatically. But if this actually adds a new translation feature, then even better!