Flatpickr - Date/Time Picker

Flatpickr is a lightweight and powerful datetime picker.

Page Demo Plugin Website

Date 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