clutch icon indicating copy to clipboard operation
clutch copied to clipboard

frontend: datetime pickers

Open Augustyniak opened this issue 5 years ago • 0 comments

Add a datetime picker based off a KeyboardDateTimePicker from material-ui/pickers package. Material UI official docs recommend the use of pickers from this package.

For now, the only way to ask user for a datetime with the use of controls exposed by clutch is to use a TextField which implements this functionality with the use of native controls.

 <TextField type="datetime-local" />

This kind of works but has a few downsides:

  • TextField exposes a selected date as a string which makes working with dates harder than necessary - a developer needs to find a way to convert them to Date objects before using them etc.
  • It works best in Chrome, Chrome actually allow you to pick the date and the time with the use of nice UI.
  • In Safari and Firefox (I have not tested other browsers), the only way for a user to provide date and time is to manually type it in the correct format (that's not obvious to the user).
Chrome Safari Firefox
Screen Shot 2020-09-15 at 5 16 58 PM Screen Shot 2020-09-15 at 5 17 16 PM Screen Shot 2020-09-15 at 5 17 33 PM

Complexity: M

Augustyniak avatar Sep 16 '20 00:09 Augustyniak