Flatpickr
Lightweight, powerful javascript datetimepicker with no dependencies
Datepicker
Basic
Set
data-provider="flatpickr" data-date-format="d M, Y"
DateTime
Set
data-provider="flatpickr" data-date-format="d.m.y" data-enable-time.
Human-Friendly Dates
Set
data-provider="flatpickr" data-altFormat="F j, Y".
MinDate and MaxDate
Set
data-provider="flatpickr" data-date-format="d M, Y" data-minDate="..." data-maxDate="...".
Default Date
Set
data-provider="flatpickr" data-default-date="..."
.
Disabling Dates
Set
data-provider="flatpickr" data-disable-date="..."
.
Selecting Multiple Dates
Set
data-provider="flatpickr" data-multiple-date="true"
.
Range
Set
data-provider="flatpickr" data-range-date="true"
.
Week Numbers
Set
data-provider="flatpickr" data-week-number
.
Inline
Set
data-provider="flatpickr" data-inline-date="true"
.
Timepicker
Timepicker
Set
data-provider="timepickr" data-time-basic="true"
attribute.
24-hour Time Picker
Set
data-provider="timepickr" data-time-hrs="true"
attribute.
Time Picker w/ Limits
Set
data-provider="timepickr" data-min-time="Min.Time" data-max-time="Max.Time"
attribute.
Preloading Time
Set
data-provider="timepickr" data-default-time="Your Default Time"
attribute.
Inline
Set
data-provider="timepickr" data-time-inline="Your Default Time"
attribute.
Date Range Picker
Date Range
Select a custom date range from the calendar.
Date Range Picker With Times
Includes both start and end time selection.
Single Date Picker
Select a single date (e.g., birthday).
Predefined Date Ranges
Choose from common ranges like "Last 7 Days", etc.
Colorpicker
Example
Classic Demo
Use
classic-colorpicker
class to set classic colorpicker.
Monolith Demo
Use
monolith-colorpicker
class to set monolith colorpicker.
Nano Demo
Use
nano-colorpicker
class to set nano colorpicker.
Demo
Use
colorpicker-demo
class to set demo option colorpicker.
Picker with Opacity & Hue
Use
colorpicker-opacity-hue
class to set colorpicker with opacity & hue.
Switches
Use
colorpicker-switch
class to set switch colorpicker.
Picker with Input
Use
colorpicker-input
class to set colorpicker with input.
Color Format
Use
colorpicker-format
class to set colorpicker with format option.