Basic
Date time picker is powered by flatpickr.js that gives the ability to user to select date or time.
<div class="form-group mb-0">
<input id="basicFlatpickr" value="2026-09-04" class="form-control flatpickr flatpickr-input active" type="text" placeholder="Select Date..">
</div>Preloading Time
Use noCalendar: true with Date Time options to disable calendar and show time picker only.
<div class="form-group mb-0">
<input id="timeFlatpickr" class="form-control flatpickr flatpickr-input active" type="text" placeholder="Select Date..">
</div>Date Time
Use enableTime: true and dateFormat: "Y-m-d H:i" option to enable time support
<div class="form-group mb-0">
<input id="dateTimeFlatpickr" value="2026-09-19 12:00" class="form-control flatpickr flatpickr-input active" type="text" placeholder="Select Date..">
</div>Range Calendar
Use mode: range select the date with range.
<div class="form-group mb-0">
<input id="rangeCalendarFlatpickr" class="form-control flatpickr flatpickr-input active" type="text" placeholder="Select Date..">
</div>Copyright © 2026 DesignReset, All rights reserved.
Coded with
