Date Picker

flatpickr.js is an excellent full featured date picker library that comes bundled and styled to work natively. See flatpickr.js docs for additional options to when initializing.

Date Picker

Initialize a date picker using data-datepicker property on your form input.

Customize the date picker options by passing valid JSON, such as data-datepicker='{"mode": "range"}'.

Date Picker Example

Range Picker Example

<div class="my-3">
    <label class="form-label">Date Picker Example</label>
    <input class="form-control" data-datepicker  placeholder="Example Date Picker" />
</div>
<div class="my-3">
    <label class="form-label">Range Picker Example</label>
    <input class="form-control" data-datepicker='{"mode": "range"}' placeholder="Example Date Range Picker" />
</div>