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-date-format="d M, Y" 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

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

A versatile JavaScript component for selecting date ranges, single dates, and times with ease. Perfect for forms and dashboards, it supports calendar views, time pickers, and predefined ranges.

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

Pickr - A simple, multi-themed, responsive and hackable Color-Picker library. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more!

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.