Welcome back
Flatpickr
Introduction
flatpickr is a lightweight and powerful datetime picker. For more info, please visit the plugin's site
- Dependency-free (no bloated bundles)
- Simple, polished UX
- Date + time input
- Range selections
- Ability to select multiple dates
- Can be used as just a time picker
- Display dates in a human-friendly format
- Easily disable specific dates, date ranges, or any date using arbitrary logic
- Week numbers
- 51 locales
- 8 colorful themes (incl. dark and material)
- Numerous plugins
- Libraries available for React, Angular, Vue, Ember, and more
Basic
DateTime
{
enableTime: true,
dateFormat: "Y-m-d H:i",
}
minDate and maxDate
minDate option specifies the minimum/earliest date (inclusively) allowed for selection.
maxDate option specifies the maximum/latest date (inclusively) allowed for selection.
{
minDate: "2020-01"
}
Selecting multiple dates
It is possible to select multiple dates.
{
mode: "multiple",
dateFormat: "Y-m-d"
}
Preloading range dates
{
mode: "range",
dateFormat: "Y-m-d",
defaultDate: ["2016-10-10", "2016-10-20"]
}
Time Picker
{
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
}
