Examples
<label class="form-label">Select date</label>
<input type="text" class="form-control flatpickr" placeholder="Select date" data-date-format="d M Y">
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" type="text/css" href="assets/vendor/flatpickr/css/flatpickr.min.css">
Copy-paste the following <script> near the end of your pages under Vendors to enable it.
<script src="assets/vendor/flatpickr/js/flatpickr.min.js"></script>
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