search

djibe / material

Material Design 2 for Bootstrap 4 (active fork of Daemonite Material)
https://djibe.github.io/material/
MIT License
68 stars 11 forks source link

(Date) Picker for desktop #6

Closed tbuyle closed 3 years ago

tbuyle commented 4 years ago

The current picker is the mobile date picker.

For desktop app, the material guidelines suggest a different behavior with the picker displayed as a dropdown calendar rather than a dialog : https://material.io/components/pickers#desktop-pickers.

djibe commented 4 years ago

I did a theme for flatpickr. I'll do a new repo for it now.

djibe commented 4 years ago

Demo here : https://jsfiddle.net/djibe89/xn153qdg/

tbuyle commented 4 years ago

Interesting.

I guess the ideal feature would be to have the picker displayed as dialog or dropdown accroding to the screen size... But that wouldn't be easy I fear.

djibe commented 4 years ago

I think people should pick the Picker they want.

tbuyle commented 4 years ago

I think otherwise... But I am not wiser than anyone and other options are just as good.

On a project using Material 1, I made some adjustment so that displaying the datepicker is optional (small calendar icon to click to view the calendar) - it requires some custom code but it could also be an option for the picker.

This app has long form (with dozen of fields) and user are used to navigate useing 'tab' - triggering the picker on focus was not an option for them.

I'll see if I can help improving the picker.

djibe commented 4 years ago

Here is my conclusion,

I remove the Picker and move to Flatpickr, better for PC. https://jsfiddle.net/djibe89/xn153qdg/

For mobile, we leave it to the OS built-in picker, as people are used to their own phone's UI.

What do you think ?

tbuyle commented 4 years ago

Sounds reasonable.

It would be nice to allow the various options of flatpicker to be used.

The clickOpens and allowInput for example are important for me as I work on application where some power-users are used to encoding (in my app or another) : they navigate forms with tabs and would rather encode date by typing them... On the other hand, a picker is required for other users in the app.

djibe commented 4 years ago

@tbuyle So like the first example ? https://jsfiddle.net/djibe89/xn153qdg/

I think I'll use this config as default

inline: false, mode: "single", allowInput: true, disableMobile: false // Mobile browser autodetected, no need https://flatpickr.js.org/mobile-support/

To use keyboard, don't set readonly on input.

How do you validate dates ?

tbuyle commented 4 years ago

Yes,

As explained on https://material.io/components/pickers#desktop-pickers , desktop picker should allow user to enter date both with the picker or typing in the input.So I would have allowInput: true by default.

But I think it would be nice to allow all flatpicker options to be set. It would be usefull to have a way to set options (ideally via data attributes or JavaScript like other (Bootstrap) components).

Not sure about the validation. But I tested your fiddle and it seems that Flatpicker is doing a nice job converting invalid date into valid one. 2020-05-32 is converted into 2020-06-01 (adding 1 day to the 31st day of month 05) and 2019-15-21 is converted into 2020-03-21 (adding 3 months to the 12th month of 2020).

djibe commented 3 years ago

Hi @tbuyle , I will release flatpickr in the Plugin section next weekend for extensive testing. If it suits you I will set it as default picker. Sources are in Master branch.

djibe commented 3 years ago

Hi @tbuyle , here is the Picker https://djibe.github.io/material/docs/4.5/plugins/picker-flatpickr/

If it suits you I will replace Daemonite's one by this one.

tbuyle commented 3 years ago

Great job !