We are using different kinds of components for date & time picker which are Flatpickr, Bootstrap datepicker, Bootstrap daterange picker, jQuery timepicker and Pickr (color picker).
Read the official Flatpickr, Bootstrap datepicker, Bootstrap daterange picker, jQuery timepicker, Pickr Documentations for a full list of instructions and other options.
Flatpickr is a lightweight, powerful javascript datetimepicker with no dependencies
Usage
In order to use flatpickr on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:
<link rel="stylesheet" href="assets/vendor/libs/flatpickr/flatpickr.css" />
Include the following vendors script in the "Vendors JS" area from the page's footer:
<script src="assets/vendor/libs/flatpickr/flatpickr.js" />
Datepicker
Use YOUR_ELEMENT.flatpickr()
to create a basic datepicker
<div class="form-floating form-floating-outline">
<input type="text" class="form-control" placeholder="YYYY-MM-DD" id="flatpickr-date" />
<label for="flatpickr-date">Date Picker</label>
</div>
var flatpickrDate = document.querySelector("#flatpickr-date");
flatpickrDate.flatpickr({
monthSelectorType: "static"
});
Timepicker
If you want to create a timepicker, add these parameters with your initialization: {enableTime: true, noCalendar: true}
.
<div class="form-floating form-floating-outline">
<input type="text" class="form-control" placeholder="HH:MM" id="flatpickr-time" />
<label for="flatpickr-time">Time Picker</label>
</div>
var flatpickrTime = document.querySelector("#flatpickr-time");
flatpickrTime.flatpickr({
enableTime: true,
noCalendar: true
});
Date Time Picker
Use enableTime: true
to have both date and time pickers.
<div class="form-floating form-floating-outline">
<input type="text" class="form-control" placeholder="YYYY-MM-DD HH:MM" id="flatpickr-datetime" />
<label for="flatpickr-datetime">Datetime Picker</label>
</div>
var flatpickrDateTime = document.querySelector("#flatpickr-datetime");
flatpickrDateTime.flatpickr({
enableTime: true,
dateFormat: "Y-m-d H:i"
});
Multi Dates Picker
Use mode: "multiple"
to select multiple dates.
<div class="form-floating form-floating-outline">
<input type="text" class="form-control" placeholder="YYYY-MM-DD HH:MM" id="flatpickr-multi" />
<label for="flatpickr-multi">Multiple Dates Picker</label>
</div>
var flatpickrMulti = document.querySelector("#flatpickr-multi");
flatpickrMulti.flatpickr({
weekNumbers: true,
enableTime: true,
mode: "multiple",
minDate: "today"
});
Range Picker
Use mode: "range"
to select dates in range.
<div class="form-floating form-floating-outline">
<input type="text" class="form-control" placeholder="YYYY-MM-DD to YYYY-MM-DD" id="flatpickr-range" />
<label for="flatpickr-range">Range Picker</label>
</div>
var flatpickrRange = document.querySelector("#flatpickr-range");
flatpickrRange.flatpickr({
mode: "range"
});
Human Friendly Picker
Refer below mentioned example to create a human friendly picker.
<div class="form-floating form-floating-outline">
<input type="text" class="form-control" placeholder="Month DD, YYYY" id="flatpickr-human-friendly" />
<label for="flatpickr-human-friendly">Human Friendly Date Picker</label>
</div>
var flatpickrFriendly = document.querySelector("#flatpickr-human-friendly");
flatpickrFriendly.flatpickr({
altInput: true,
altFormat: "F j, Y",
dateFormat: "Y-m-d"
});
Disabled Range Picker
Create an array of disabled date like this: disable: [{from: "DATE", to: "DATE"}]
to create a disabled range dates picker
<div class="form-floating form-floating-outline">
<input type="text" class="form-control" placeholder="YYYY-MM-DD" id="flatpickr-disabled-range" />
<label for="flatpickr-disabled-range">Disabled Range</label>
</div>
var flatpickrDisabledRange = document.querySelector("#flatpickr-disabled-range");
flatpickrDisabledRange.flatpickr({
dateFormat: "Y-m-d",
disable: [
{
from: "2021-10-01",
to: "2021-10-10"
}
]
});
Inline Picker
Use inline : true
to make your picker inline.
<div class="form-floating form-floating-outline">
<input type="text" class="form-control mb-1" placeholder="YYYY-MM-DD" id="flatpickr-inline" />
<label for="flatpickr-inline">Inline Picker</label>
</div>
var flatpickrInline = document.querySelector("#flatpickr-inline");
flatpickrInline.flatpickr({
inline: true,
allowInput: false,
monthSelectorType: "static"
});
Bootstrap Datepicker is a datepicker for bootstrap framework with jQuery dependency.
Usage
In order to use Bootstrap Datepicker on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:
<link rel="stylesheet" href="assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.css" />
Include the following vendors script in the "Vendors JS" area from the page's footer:
<script src="assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.js" />
Basic
Use YOUR_ELEMENT.datepicker()
to create a basic datepicker
Format
Use format
property to change date format.
Range
Create a range input using bootstrap's input group.
<div class="mb-3">
<label for="dateRangePicker" class="form-label">Date Range</label>
<div class="input-group input-daterange" id="bs-datepicker-daterange">
<input id="dateRangePicker" type="text" placeholder="MM/DD/YYYY" class="form-control" />
<span class="input-group-text">to</span>
<input type="text" placeholder="MM/DD/YYYY" class="form-control" />
</div>
</div>
$("#bs-datepicker-daterange").datepicker();
Disabled Days
Use daysOfWeekDisabled
property to disable particular week days. In the example below, we have disables all days of Saturday and Sunday.
<div class="form-floating form-floating-outline">
<input type="text" id="bs-datepicker-disabled-days" placeholder="MM/DD/YYYY" class="form-control" />
<label for="bs-datepicker-disabled-days">Disabled Days</label>
</div>
$("#bs-datepicker-disabled-days").datepicker({ daysOfWeekDisabled: [0,6] });
Multiple
Use multidate: true
property to select multiple dates.
Options
You can use any options according to your needs. In the below example, we have used calendarWeeks
, clearBtn
, todayHighlight
and orientation: "auto right"
options.
<div class="form-floating form-floating-outline">
<input type="text" id="bs-datepicker-options" placeholder="MM/DD/YYYY" class="form-control" />
<label for="bs-datepicker-options">Options</label>
</div>
$("#bs-datepicker-options").datepicker({
calendarWeeks: true,
clearBtn: true,
todayHighlight: true,
orientation: "auto right"
});
Autoclose
Use autoclose: true
property to automatically close your datepicker on date selection.
Bootstrap Datepicker is a bootstrap compatible date range picker based on jQuery.
Usage
In order to use Bootstrap Daterangepicker on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:
<link rel="stylesheet" href="assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.css" />
Include the following vendors script in the "Vendors JS" area from the page's footer:
<script src="assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.js" />
Basic
Use YOUR_ELEMENT.daterangepicker()
to create a basic datepicker.
Single
Use singleDatePicker: true
property to create a single datepicker.
With Timepicker
Use timePicker: true
property to add a timepicker.
<div class="form-floating form-floating-outline">
<input type="text" id="bs-rangepicker-time" class="form-control" />
<label for="bs-rangepicker-time">With Time Picker</label>
</div>
$("#bs-rangepicker-time").daterangepicker({
timePicker: true
timePickerIncrement: 30,
locale: {
format: 'MM/DD/YYYY h:mm A'
},
});
Range
Use ranges
property for ranges of picker.
<div class="form-floating form-floating-outline">
<input type="text" id="bs-rangepicker-range" class="form-control" />
<label for="bs-rangepicker-range">Ranges</label>
</div>
$(".bs-rangepicker-range").daterangepicker({
ranges: {
Today: [moment(), moment()],
Yesterday: [moment().subtract(1, "days"), moment().subtract(1, "days")],
"Last 7 Days": [moment().subtract(6, "days"), moment()],
"Last 30 Days": [moment().subtract(29, "days"), moment()],
"This Month": [moment().startOf("month"), moment().endOf("month")],
"Last Month": [
moment().subtract(1, "month").startOf("month"),
moment().subtract(1, "month").endOf("month")
]
}
});
Week Numbers
Use showWeekNumbers: true
property to show week numbers.
Month & Week Dropdown
Use showDropdowns: true
property to show dropdowns for month and year.
jQuery Timepicker a lightweight, customizable javascript timepicker plugin for jQuery inspired by Google Calendar.
Usage
In order to use jQuery Timepicker on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:
<link rel="stylesheet" href="assets/vendor/libs/jquery-timepicker/jquery-timepicker.css" />
Include the following vendors script in the "Vendors JS" area from the page's footer:
<script src="assets/vendor/libs/jquery-timepicker/jquery-timepicker.js" />
Basic
Use YOUR_ELEMENT.timepicker()
to create a basic timepicker.
Min Max
Use minTime
and maxTime
to create a timepicker with min and max time. Use showDuration: true
property to show time duration along with the time.
<div class="form-floating form-floating-outline">
<input type="text" id="timepicker-min-max" placeholder="HH:MMam" class="form-control" />
<label for="timepicker-min-max">Min-Max</label>
</div>
$("#timepicker-min-max").timepicker({
minTime: "2:00pm",
maxTime: "7:00pm",
showDuration: true
});
Disabled Times
Use disableTimeRanges
property to disable range of time.
<div class="form-floating form-floating-outline">
<input type="text" id="timepicker-disabled-times" placeholder="HH:MMam" class="form-control" />
<label for="timepicker-disabled-times">Disabled Times</label>
</div>
$("#timepicker-disabled-times").timepicker({
disableTimeRanges: [
["12am", "3am"],
["4am", "4:30am"]
]
});
Format
Use timeFormat
property to change the format of time.
Steps
Use steps
property to create a timepicker with steps.
24 Hours Time Format
Use show: "24:00"
property to create a timepicker with 24 hours time format. You may also use timeFormat
property for your preferred format of time.
Pickr is a flat, 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!
Usage
In order to use pickr on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:
<!-- If you want all three styles, include pickr-themes.css -->
<link rel="stylesheet" href="assets/vendor/libs/pickr/pickr-themes.css" />
<!-- If you only want classic style, include pickr-classic.css -->
<link rel="stylesheet" href="assets/vendor/libs/pickr/pickr-classic.css" />
<!-- If you only want monolith style, include pickr-monolith.css -->
<link rel="stylesheet" href="assets/vendor/libs/pickr/pickr-monolith.css" />
<!-- If you only want nano style, include pickr-nano.css -->
<link rel="stylesheet" href="assets/vendor/libs/pickr/pickr-nano.css" />
Include the following vendors script in the "Vendors JS" area from the page's footer:
<script src="assets/vendor/libs/pickr/pickr.js" />
Classic
Use theme: "classic"
property to have a classic styled color picker.
<div id="color-picker-classic"></div>
var classicPicker = pickr.create({
el: "#color-picker-classic",
theme: "classic",
default: "rgba(102, 108, 232, 1)",
swatches: [
"rgba(102, 108, 232, 1)",
"rgba(40, 208, 148, 1)",
"rgba(255, 73, 97, 1)",
"rgba(255, 145, 73, 1)",
"rgba(30, 159, 242, 1)"
],
components: {
// Main components
preview: true,
opacity: true,
hue: true,
// Input / output Options
interaction: {
hex: true,
rgba: true,
hsla: true,
hsva: true,
cmyk: true,
input: true,
clear: true,
save: true
}
}
});
Monolith
Use theme: "monolith"
property to have a monolith styled color picker.
<div id="color-picker-monolith"></div>
var monolithPicker = pickr.create({
el: "#color-picker-monolith",
theme: "monolith",
default: "rgba(40, 208, 148, 1)",
swatches: [
"rgba(102, 108, 232, 1)",
"rgba(40, 208, 148, 1)",
"rgba(255, 73, 97, 1)",
"rgba(255, 145, 73, 1)",
"rgba(30, 159, 242, 1)"
],
components: {
// Main components
preview: true,
opacity: true,
hue: true,
// Input / output Options
interaction: {
hex: true,
rgba: true,
hsla: true,
hsva: true,
cmyk: true,
input: true,
clear: true,
save: true
}
}
});
Nano
Use theme: "nano"
property to have a nano styled color picker.
<div id="color-picker-nano"></div>
var nanoPicker = pickr.create({
el: "#color-picker-nano",
theme: "nano",
default: "rgba(255, 73, 97, 1)",
swatches: [
"rgba(102, 108, 232, 1)",
"rgba(40, 208, 148, 1)",
"rgba(255, 73, 97, 1)",
"rgba(255, 145, 73, 1)",
"rgba(30, 159, 242, 1)"
],
components: {
// Main components
preview: true,
opacity: true,
hue: true,
// Input / output Options
interaction: {
hex: true,
rgba: true,
hsla: true,
hsva: true,
cmyk: true,
input: true,
clear: true,
save: true
}
}
});