Date / time picker

A lightweight and powerful date / time picker component.

Around component

Ensure that you include the Flatpickr CSS and JS files in your document by linking to the following paths: assets/vendor/flatpickr/dist/flatpickr.min.css and assets/vendor/flatpickr/dist/flatpickr.min.js.

For date range feature, be sure to add assets/vendor/flatpickr/dist/plugins/rangePlugin.js as well. You can use this page as a reference.

You can alter date / time picker behaviour via flexible data API.

data-datepicker-options = '{}':

To see all available options visit: https://flatpickr.js.org/options/

Usage examples: https://flatpickr.js.org/examples/

Choose date

<!-- Date picker -->
<label class="form-label">Choose date</label>
<div class="position-relative">
  <input class="form-control date-picker pe-5" type="text" placeholder="Choose date" data-datepicker-options='{"altInput": true, "altFormat": "F j, Y", "dateFormat": "Y-m-d"}'>
  <i class="ai-calendar position-absolute top-50 end-0 translate-middle-y me-3"></i>
</div>

Date and time picker

Preview
HTML

Choose date and time

<!-- Date and time picker -->
<label class="form-label">Choose date and time</label>
<div class="position-relative">
  <input class="form-control date-picker pe-5" type="text" placeholder="Choose date and time" data-datepicker-options='{"enableTime": true, "altInput": true, "altFormat": "F j, Y H:i", "dateFormat": "Y-m-d H:i"}'>
  <i class="ai-calendar position-absolute top-50 end-0 translate-middle-y me-3"></i>
</div>

Min date + default date

Preview
HTML

Min date - Today

<!-- Min date + default date - Today -->
<label class="form-label">Min date - Today</label>
<div class="position-relative">
  <input class="form-control date-picker pe-5" type="text" placeholder="Choose date and time" data-datepicker-options='{"altInput": true, "altFormat": "F j, Y", "dateFormat": "Y-m-d", "defaultDate": "today", "minDate": "today"}'>
  <i class="ai-calendar position-absolute top-50 end-0 translate-middle-y me-3"></i>
</div>

Date range

Preview
HTML

Date range

<!-- Date range -->
<label>Date range</label>
<div class="input-group">
  <span class="input-group-text">
    <i class="ai-calendar"></i>
  </span>
  <input class="form-control date-picker date-range" type="text" placeholder="From date" data-datepicker-options='{"altInput": true, "altFormat": "F j, Y", "dateFormat": "Y-m-d"}' data-linked-input="#end-date">
  <span class="border-end border-input"></span>
  <input class="form-control date-picker" type="text" placeholder="To date" data-datepicker-options='{"altInput": true, "altFormat": "F j, Y", "dateFormat": "Y-m-d"}' id="end-date">
</div>

Content

Components

Utilities

Menu

Content

Components

Utilities

Date / time picker

You can alter date / time picker behaviour via flexible data API.

To see all available options visit: https://flatpickr.js.org/options/

Usage examples: https://flatpickr.js.org/examples/

Date picker

Date and time picker

Min date + default date

Date range