Datepicker view changes
Is there a way to show years and then when clicked on it show month and then the actual calendar in datepicker, instead of opening the month calendar when we click on it ?
9 Replies
this view by default
Is that the native or the JS one? I guess the way to go would be to override the template for the datepicker and configure it using JS/HTML, if possible (that I don't know)
this is native
If you are using the default one by Filament, Filament are using the default datepicker of the browser if you are using native or any library for date picking you should see options of that library
I am using default filament's datepicker
MDN Web Docs
- HTML: HyperText Markup Language | MDN
elements of type="date" create input fields that let the user enter a date. The appearance of the date picker input UI varies based on the browser and operating system. The value is normalized to the format yyyy-mm-dd.
I think we can solve this problem by several steps
1. install a Custom Datepicker Library
2. Customze Flatpickr configuration
3. Add Flatpickr JS logic
4. Optional: use the monthSelectPlugin for Year -> Month -> Day Selection
5. Replace Filament's Default Behavior
To sum up, We need to customize datepicker plugin
I tried flatpickr as well but it did not worked the way i wanted
There a flatpicker plugin, but this looks like a custom DatePicker implementation that I haven’t seen anyone make. So, if this is the functionality you need then you might have to make a custom field to achieve it.