Pickers

  1. Forms
  2. Pickers

Flatpickr - Datepicker

Set data-provider="flatpickr" data-date-format="d M, Y" attribute.

Set data-provider="flatpickr" data-date-format="d.m.y" data-enable-time attribute.

Set data-provider="flatpickr" data-altFormat="F j, Y" attribute.

Set data-provider="flatpickr" data-date-format="d M, Y" data-minDate="Your Min. Date" data-maxDate="Your Max. date" attribute.

Set data-provider="flatpickr" data-date-format="d M, Y" data-deafult-date="Your Default Date" attribute.

Set data-provider="flatpickr" data-disable="true" attribute.

Set data-provider="flatpickr" data-date-format="d M, Y" data-multiple-date="true" attribute.

Set data-provider="flatpickr" data-date-format="d M, Y" data-range-date="true" attribute.

Set data-provider="flatpickr" data-date-format="d M, Y" data-deafult-date="today" data-inline-date="true" attribute.

Set data-provider="flatpickr" data-date-format="d M, Y" data-week-number attribute.

Flatpickr - Timepicker

Set data-provider="timepickr" data-time-basic="true" attribute.

Set data-provider="timepickr" data-time-hrs="true" attribute.

Set data-provider="timepickr" data-min-time="Min.Time" data-max-time="Max.Time" attribute.

Set data-provider="timepickr" data-default-time="Your Default Time" attribute.

Set data-provider="timepickr" data-time-inline="Your Default Time" attribute.

Colorpicker

Themes
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.

Options
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.