Flatpickr | Velzon - Django Admin & Dashboard Template Documentation

flatpickr is a lightweight and powerful datetime picker.

<!-- flatpickr.js -->
<script type='text/javascript' src="{% static 'libs/flatpickr/dist/flatpickr.min.js' %}"></script>

Flatpickr js file is loaded in <script src="{% static 'js/plugins.js'%}"></script>.

<!-- app js -->
<script src="{% static 'js/app.js'%}"></script>

yarn add flatpickr --save

yarn remove flatpickr or you can remove package by removing specific package from package.json

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">`

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">`