INSPINIA - Responsive Bootstrap 5 Admin Dashboard

Pickers

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 Picker on View Official Website

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.

Flatpickr

Lightweight, powerful javascript datetimepicker with no dependencies

Flatpickr on View Official Website

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

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.

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!

Simonwep Colorpicker on View Official Website

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.