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="mb-3">
<label for="flatpickr-date" class="form-label">Date Picker</label>
<input type="text" class="form-control" placeholder="YYYY-MM-DD" id="flatpickr-date" />
</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="mb-3">
<label for="flatpickr-time" class="form-label">Time Picker</label>
<input type="text" class="form-control" placeholder="HH:MM" id="flatpickr-time" />
</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="mb-3">
<label for="flatpickr-datetime" class="form-label">Datetime Picker</label>
<input type="text" class="form-control" placeholder="YYYY-MM-DD HH:MM" id="flatpickr-datetime" />
</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="mb-3">
<label for="flatpickr-multi" class="form-label">Multiple Dates Picker</label>
<input type="text" class="form-control" placeholder="YYYY-MM-DD HH:MM" id="flatpickr-multi" />
</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="mb-3">
<label for="flatpickr-range" class="form-label">Range Picker</label>
<input type="text" class="form-control" placeholder="YYYY-MM-DD to YYYY-MM-DD" id="flatpickr-range" />
</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="mb-3">
<label for="flatpickr-human-friendly" class="form-label">Human Friendly Date Picker</label>
<input type="text" class="form-control" placeholder="Month DD, YYYY" id="flatpickr-human-friendly" />
</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="mb-3">
<label for="flatpickr-disabled-range" class="form-label">Disabled Range</label>
<input type="text" class="form-control" placeholder="YYYY-MM-DD" id="flatpickr-disabled-range" />
</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="mb-3">
<label for="flatpickr-inline" class="form-label">Inline Picker</label>
<input type="text" class="form-control mb-1" placeholder="YYYY-MM-DD" id="flatpickr-inline" />
</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="mb-3">
<label for="bs-datepicker-disabled-days" class="form-label">Disabled Days</label>
<input type="text" id="bs-datepicker-disabled-days" placeholder="MM/DD/YYYY" class="form-control" />
</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="mb-3">
<label for="bs-datepicker-options" class="form-label">Options</label>
<input type="text" id="bs-datepicker-options" placeholder="MM/DD/YYYY" class="form-control" />
</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" />
Single
Use singleDatePicker: true
property to create a single datepicker.
With Timepicker
Use timePicker: true
property to add a timepicker.
<div class="mb-3">
<label for="bs-rangepicker-time" class="form-label">With Time Picker</label>
<input type="text" id="bs-rangepicker-time" class="form-control" />
</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="mb-3">
<label for="bs-rangepicker-range" class="form-label">Ranges</label>
<input type="text" id="bs-rangepicker-range" class="form-control" />
</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" />
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.
Disabled Times
Use disableTimeRanges
property to disable range of time.
<div class="mb-3">
<label for="timepicker-disabled-times" class="form-label">Disabled Times</label>
<input type="text" id="timepicker-disabled-times" placeholder="HH:MMam" class="form-control" />
</div>
$("#timepicker-disabled-times").timepicker({
disableTimeRanges: [
["12am", "3am"],
["4am", "4:30am"]
]
});
Format
Use timeFormat
property to change the format of time.
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
}
}
});