Picker (date)

Date pickers are control elements that display a calendar. It will automatically switch to native date pickers on mobile.

Default

JSON configuration options can be passed to the flatpickr date picker library by setting the flatpickr-options attribute. These options are not possible because of internal usage: onChange and defaultDate.

 

Language options

 

Restricted choices

 

Weekdays only

In this case, real JavaScript has to be passed to the flatpickrOptions.


                                                        
                                                        
                                                            document.getElementById("date-no-weekends").flatpickrOptions = {
                                                          disable: [
                                                            function(date) {
                                                              return date.getDay() > 5 || date.getDay() < 1;
                                                            }
                                                          ]
                                                        };
                                                        
                                                            

 

Next week only

In this case, real JavaScript has to be passed to the flatpickrOptions.


                                                        
                                                        
                                                            document.getElementById("date-next-week-only").flatpickrOptions = {
                                                          minDate: "today",
                                                          maxDate: new Date().fp_incr(7)
                                                        };
                                                        
                                                            

 

Show week numbers