Finder Buy now

Date / time picker

A lightweight and powerful date / time picker component.

Finder component
To see all available options visit:https://www.npmjs.com/package/angularx-flatpickr
Usage examples:https://mattlewis92.github.io/angularx-flatpickr/

Date picker

<!-- Date picker -->
<label class="form-label">Choose date</label>
<div class="input-group">
  <input class="form-control date-picker rounded pe-5 flatpickr-input" type="text" placeholder="Choose date" mwlFlatpickr [altInput]="true" [convertModelValue]="true">
  <i class="fi-calendar position-absolute top-50 end-0 translate-middle-y me-3"></i>
</div>

Date and time picker

<!-- Date and time picker -->
<label class="form-label">Choose date and time</label>
<div class="input-group">
  <input class="form-control date-picker rounded pe-5 flatpickr-input" type="text" placeholder="Choose date and time" mwlFlatpickr [altInput]="true" [convertModelValue]="true">
  <i class="fi-calendar position-absolute top-50 end-0 translate-middle-y me-3"></i>
</div>

Min date + default date

<!-- Min date + default date - Today -->
<label class="form-label">Min date - Today</label>
<div class="input-group">
  <input class="form-control date-picker rounded pe-5 flatpickr-input" type="text" placeholder="Choose date and time" [altInput]="true" [convertModelValue]="true">
  <i class="fi-calendar position-absolute top-50 end-0 translate-middle-y me-3"></i>
</div>

Date range

<!-- Date range -->
<label>Date range</label>
<div class="input-group">
  <span class="input-group-text">
    <i class="fi-calendar"></i>
  </span>
  <input class="form-control date-picker date-range flatpickr-input" type="text" placeholder="From date" [altInput]="true" [convertModelValue]="true">
  <input class="form-control date-picker flatpickr-input" type="text" placeholder="To date" [altInput]="true" [convertModelValue]="true">
</div>
Top