Messages
Liam Carter uploaded a new document to Project Phoenix
5 minutes ago
Ava Mitchell commented on Marketing Campaign Q3
12 minutes ago
30 minutes ago
Sophia Taylor sent an invoice for Service Renewal
1 hour ago
Ethan Moore completed the task UI Review
2 hours ago
Olivia White assigned you a task in Sales Pipeline
Yesterday
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 WebsiteDate 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 WebsiteDatepicker
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 WebsiteExample
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.