OverviewOfficial Website

flatpickr is a lightweight and powerful datetime picker.

Javascript
<!-- flatpickr.js -->
<script type='text/javascript' src='/libs/flatpickr/flatpickr.min.js'></script>
Note
Flatpickr js file is loaded in <script src="/js/pluggin.js"></script>.
Initjs (Custom js)
<!-- app js -->
<script src="/js/app.js"></script>
Add Package
yarn add flatpickr --save
Remove Package
yarn remove flatpickr or you can remove package by removing specific package from package.json
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">
© Skote.