Hello Hope!

Experience a simple yet powerful way to build Dashboards with HOPE UI.

header header header header header header


For more Information regarding Flatpickr Plugin refer Documentation

Basic Date Time

flatpickr without any config

Selecting multiple dates

It is possible to select multiple dates.


minDate option specifies the minimum/earliest date (inclusively) allowed for selection.


maxDate option specifies the maximum/latest date (inclusively) allowed for selection.

Disabling Specific dates

If you’d like to make certain dates unavailable for selection


Time pickers allow users to enter a specific Time value .

Disabling all dates except select few

This is the enable option, which takes in an array of date strings, date ranges and functions. Essentially the same as the disable option above, but reversed.

Human-friendly Dates

Upon date selection, the original input will contain a Y-m-d... string, while the altInput will display the date in a more legible, customizable format.

Range Calendar

Select a range of dates using the range calendar.

Date Picker

Date pickers allow users to enter a specific date .