Buy now
Date / time picker
A lightweight and powerful date / time picker component.
Cartzilla 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://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>