See Flatpickr example with data attributes code below:
<!-- Single -->
<input type="text" class="form-control flatpickr" placeholder="Select date">
<!-- Multiple -->
<input type="text" class="form-control flatpickr" data-mode="multiple" placeholder="Select date">
<!-- Range -->
<input type="text" class="form-control flatpickr" data-mode="range" placeholder="Select date">
<!-- Enable Time with no calendar -->
<input type="text" class="form-control flatpickr" data-enableTime="true" data-noCalendar="true" placeholder="Select time">
<!-- Inline -->
<input type="text" class="form-control flatpickr" data-inline="true" placeholder="Select date">
<!-- Date formate -->
<input type="text" class="form-control flatpickr" data-date-format="d/M/Y" placeholder="Select date">
We have provided Flatpickr data attributes so you don't need to play with JavaScrips or CSS. The list of Flatpickr data attributes type name and it's descriptions are provided below for the reference:
| Data Attributes name | Description | Available options |
|---|---|---|
| data-enableTime="true" | Enable or disable time | Boolean (true or false) |
| data-noCalendar="true" | Enable or disable Calendar | Boolean (true or false) |
| data-mode="mode" | With this data attributes set mode of date | "range" | "single" |
| data-inline="true" | Boolean (true or false) | |
| data-date-format="d M" | With this data attributes display type of date and time formate | "d M" | "d M Y" | "h:i K" |
Above code examples are few of the most common options from flatpickr. Checkout all examples at Official documentation