Material-components-web-components: Implement Date and Time Pickers

[PaulHMason]

I'm submitting a:

• [ ] bug report
• [x] feature request

Other information:
There doesn't appear to be a feature request for Material Design date and time pickers. The Material Design site has guidance for date pickers, but not time pickers (I seem to recall V1 having time pickers though). Only Flutter seems to have implemented them.

https://material.io/components/pickers/

[asyncLiz]

Thanks for the issue. Currently date picker and time picker have not been prioritized in MDC, and won't be implemented in MWC until then. You can follow https://github.com/material-components/material-components-web/issues/54 and https://github.com/material-components/material-components-web/issues/55 to be notified of progress on them.

[cintaccs]

funny that these components have no priority considering the amount of thumbs up 👍❤️ and hearts ... I can’t recall having seen that much communitty “up-voting” in these two repos.... but it seems to be ignored for unknown reasons

[asyncLiz]

The only specs for detailed date and time pickers are for mobile, and those components have already been implemented for native. We're waiting on good design specs for a desktop date/time picker.

In the meantime, the browser's built-in <input type="date">, type="time", and type="datetime" are supported for the Material textfield.

[cintaccs]

I am not "complaining" and my comment shouldn't be understood negative! however I am almost certain that 90% or more of the solutions that uses your repos are implementing own "crappy" date and time pickers. The browsers built-in date, time and date-time pickers are very very seldom used in applications that implement any kind of modern design because the design is weird and the date-formats seldom fits etc.

Date and time picking is fundamental, it is basic types, it is something that should fit the dialogue, colours, icons, density etc. of the MDC and MWC perfectly. You have access to the people who made the built-in implementation. You have access to the people who work on lit-elements etc. you could make the absolute most perfect solution that none of us outside Google will ever be able to do. You already have all the regional settings, day and month name translations, writing directions, start-week-day, time formats etc. Stuff that all developers have to implement on their own in any application.

It is a simple component to fill (no date, a date or a date range in a specific UTF format) - and the output is simple too (null, date in UTF format, regional format or a range of dates in those formats). The actual implementation and the features to effectively pick dates, ranges, formats, year, etc. similar to your Google calendar works ... would be where you could exceed all our expectations.

Additionally it is also a component that would involve getting the dialog events for opening, opened, closing etc. working correctly as well as a showcase focus wrapping etc. That could help improving user docs on how to work with the components in combination as well as catch errors on event firing issues etc. that you see across the repos.

Because the date picker needs a fixed layout, and be in 100% control of font-sizes etc. to be really cool - it is a perfect "web-component" candidate. Probably the most popular component / plugin in all the other frameworks like jquery, angular, react etc. Going Lit instead of frameworks - means that we need an alternative to the pickers in JQuery, Angular, React...

I have made this using your MDC text field, dialog, icons and buttons (more to underline that your work is for sure being appreciated and used - and we do try to find solutions):

and it is ok - but not brilliant like you could do it....

[motss]

@cintaccs @PaulHMason @asyncLiz

Meanwhile you can look at a relevant datepicker element [here].

[cintaccs]

@motss
That is excellent! Thanks a lot! I will join your efforts and probably use your component. Your component provides a number of the things that I requested (week start, week numbers, year picker) and you don't bother with IE older compatibility (we really shouldn't) and it is based on Lit etc. GREAT!! THANKS!

[motss]

It should work on IE11 but I decided not to support it anymore especially when it complicates the tests. Plus Chromium Edge is now stable, why don't just use that? 😂