Flatpickr - Date/Time Picker
Flatpickr is a lightweight and powerful datetime picker.
Page Demo Plugin WebsiteDate and Time Picker
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="zmdi zmdi-calendar"></i></span>
</div>
<input type="datetime-local" class="form-control hidden-md-up" placeholder="Pick a date & time">
<input type="text" class="form-control datetime-picker hidden-sm-down" placeholder="Pick a date & time">
</div>
// Function available at /js/app.min.js (concat from /js/inc/functions/vendors.js)
if($('.datetime-picker')[0]) {
$('.datetime-picker').flatpickr({
enableTime: true,
nextArrow: '<i class="zmdi zmdi-long-arrow-right" />',
prevArrow: '<i class="zmdi zmdi-long-arrow-left" />'
});
}
Date Picker
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="zmdi zmdi-calendar"></i></span>
</div>
<input type="date" class="form-control hidden-md-up" placeholder="Pick a date">
<input type="text" class="form-control date-picker hidden-sm-down" placeholder="Pick a date">
</div>
// Function available at /js/app.min.js (concat from /js/inc/functions/vendors.js)
if($('.date-picker')[0]) {
$('.date-picker').flatpickr({
enableTime: false,
nextArrow: '<i class="zmdi zmdi-long-arrow-right" />',
prevArrow: '<i class="zmdi zmdi-long-arrow-left" />'
});
}
Time Picker
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="zmdi zmdi-calendar"></i></span>
</div>
<input type="time" class="form-control hidden-md-up" placeholder="Pick a time">
<input type="text" class="form-control time-picker hidden-sm-down" placeholder="Pick a time">
</div>
// Function available at /js/app.min.js (concat from /js/inc/functions/vendors.js)
if($('.time-picker')[0]) {
$('.time-picker').flatpickr({
noCalendar: true,
enableTime: true
});
}
Requirements:
/scss/inc/vendor-overrides/_flatpickr.scss
/vendors/flatpickr/flatpickr.min.css
/vendors/flatpickr/flatpickr.min.js