OverviewOfficial Website

flatpickr is a lightweight and powerful datetime picker.

Javascript
<!-- flatpickr.js -->
<script type='text/javascript' src='assets/libs/flatpickr/flatpickr.min.js'></script> //html file
<script type='text/javascript' src='{{ URL::asset('build/libs/flatpickr/flatpickr.min.js') }}'></script> // laravel file
Note
Flatpickr js file is loaded in <script src="assets/js/pluggin.js"></script> //html file
Flatpickr js file is loaded in <script src="{{ URL::asset('build/js/plugins.js') }}"></script> // laravel file
Initjs (Custom js)
<!-- app js -->
<script src="assets/js/app.js"></script> //html file
<script src="{{ URL::asset('build/js/app.js') }}"></script> // laravel file
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.