Date / time picker

A lightweight and powerful datetime picker component.

Around component

Make sure to link to Flatpickr css and js files in your document: vendor/flatpickr/dist/flatpickr.min.css and vendor/flatpickr/dist/flatpickr.min.js. Use this page as a reference.

For date range feature make sure to link also vendor/flatpickr/dist/plugins/rangePlugin.js.

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/

Date picker

Choose date

<!-- Date picker -->
<div class="form-group">
  <label class="form-label">Choose date</label>
  <div class="input-group-overlay">
    <input class="form-control appended-form-control cs-date-picker" type="text" placeholder="Choose date" data-datepicker-options='{"altInput": true, "altFormat": "F j, Y", "dateFormat": "Y-m-d"}'>
    <div class="input-group-append-overlay">
      <span class="input-group-text">
        <i class="fe-calendar"></i>
      </span>
    </div>
  </div>
</div>

// Date picker
.form-group
  label.form-label Choose date
  .input-group-overlay
    input(type="text", placeholder="Choose date", data-datepicker-options='{"altInput": true, "altFormat": "F j, Y", "dateFormat": "Y-m-d"}').form-control.appended-form-control.cs-date-picker
    .input-group-append-overlay
      span.input-group-text
        i.fe-calendar

Date and time picker

Choose date and time

<!-- Date and time picker -->
<div class="form-group">
  <label class="form-label">Choose date and time</label>
  <div class="input-group-overlay">
    <input class="form-control appended-form-control cs-date-picker" 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"}'>
    <div class="input-group-append-overlay">
      <span class="input-group-text">
        <i class="fe-calendar"></i>
      </span>
    </div>
  </div>
</div>

// Date and time picker
.form-group
  label.form-label Choose date and time
  .input-group-overlay
    input(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"}').form-control.appended-form-control.cs-date-picker
    .input-group-append-overlay
      span.input-group-text
        i.fe-calendar

Min date + default date

Min date - Today

<!-- Min date + default date - Today -->
<div class="form-group">
  <label class="form-label">Min date - Today</label>
  <div class="input-group-overlay">
    <input class="form-control appended-form-control cs-date-picker" type="text" placeholder="Choose date" data-datepicker-options='{"altInput": true, "altFormat": "F j, Y", "dateFormat": "Y-m-d", "defaultDate": "today", "minDate": "today"}'>
    <div class="input-group-append-overlay">
      <span class="input-group-text">
        <i class="fe-calendar"></i>
      </span>
    </div>
  </div>
</div>

// Min date + default date - Today
.form-group
  label.form-label Min date - Today
  .input-group-overlay
    input(type="text", placeholder="Choose date", data-datepicker-options='{"altInput": true, "altFormat": "F j, Y", "dateFormat": "Y-m-d", "defaultDate": "today", "minDate": "today"}').form-control.appended-form-control.cs-date-picker
    .input-group-append-overlay
      span.input-group-text
        i.fe-calendar

Date range

<!-- Date range -->
<div class="form-group">
  <label>Date range</label>
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text bg-secondary">
        <i class="fe-calendar"></i>
      </span>
    </div>
    <input class="form-control cs-date-picker cs-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">
    <input class="form-control cs-date-picker" type="text" placeholder="To date" data-datepicker-options='{"altInput": true, "altFormat": "F j, Y", "dateFormat": "Y-m-d"}' id="end-date">
  </div>
</div>

// Date range
.form-group
  label Date range
  .input-group
    .input-group-prepend
      span.input-group-text.bg-secondary
        i.fe-calendar
    input(type="text", placeholder="From date", data-datepicker-options='{"altInput": true, "altFormat": "F j, Y", "dateFormat": "Y-m-d"}', data-linked-input="#end-date").form-control.cs-date-picker.cs-date-range
    input(type="text", placeholder="To date", data-datepicker-options='{"altInput": true, "altFormat": "F j, Y", "dateFormat": "Y-m-d"}')#end-date.form-control.cs-date-picker