ws7 Buy now

Date / time picker

A lightweight and powerful datetime picker component.

ws7 component
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

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

Date and time picker

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

Min date + default date

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

Date range

<!-- Date range -->
<div class="mb-3">
  <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="{&quot;altInput&quot;: true, &quot;altFormat&quot;: &quot;F j, Y&quot;, &quot;dateFormat&quot;: &quot;Y-m-d&quot;}" data-linked-input="#end-date">
    <input class="form-control date-picker" type="text" placeholder="To date" data-datepicker-options="{&quot;altInput&quot;: true, &quot;altFormat&quot;: &quot;F j, Y&quot;, &quot;dateFormat&quot;: &quot;Y-m-d&quot;}" id="end-date">
  </div>
</div>
// Date range
.mb-3
  label Date range
  .input-group
    span.input-group-text
      i.ai-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.date-picker.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.date-picker
Top