flatpickr is a lightweight and powerful datetime picker.
Javascript
<!-- flatpickr.js -->
<script type='text/javascript' src='assets/libs/flatpickr/flatpickr.min.js'></script>
Initjs (Custom js)
<!-- app js -->
<script src="assets/js/app.js"></script>
Flatpickr Examples:
| Title |
HTML |
| Basic |
<input type="text" class="form-control" data-provider="flatpickr" data-date-format="d M, Y">
|
| DateTime |
<input type="text" class="form-control" data-provider="flatpickr" data-date-format="d.m.y" data-enable-time >
|
| Human-Friendly Dates |
<input type="text" class="form-control flatpickr-input" data-provider="flatpickr" data-altFormat="F j, Y">
|
| MinDate and MaxDate |
<input type="text" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" data-minDate="25 12, 2021" data-maxDate="29 12,2021">
|
| Default Date |
<input type="text" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" data-deafult-date="25 12,2021">
|
| Disabling Dates |
<input type="text" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" data-disable-date="15 12,2021" >
|
| Selecting Multiple Dates |
<input type="text" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" data-multiple-date="true" >
|
| Range |
<input type="text" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" data-range-date="true">
|
| Inline |
<input type="text" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" data-deafult-date="25 01,2021" data-inline-date="true">
|
Timepickr Examples:
| Title |
HTML |
| Basic Timepicker |
<input type="text" class="form-control" data-provider="timepickr" data-time-basic="true">
|
| 24-hour Time Picker |
<input type="text" class="form-control" data-provider="flatpickr" data-date-format="d.m.y" data-enable-time >
|
| Time Picker w/ Limits |
<input type="text" class="form-control flatpickr-input" data-provider="flatpickr" data-altFormat="F j, Y">
|
| Preloading Time |
<input type="text" class="form-control" data-provider="timepickr" data-default-time="16:45">
|
| Inline |
<input type="text" class="form-control" data-provider="timepickr" data-time-inline="11:42">
|
