Flatpickr

flatpickr is a lightweight and powerful datetime picker.

Javascript
<!-- flatpickr.js -->
<script type='text/javascript' src='{{ URL::asset('build/libs/flatpickr/flatpickr.min.js') }}'></script>
Note
Flatpickr js file is loaded in <script src="{{ URL::asset('build/js/pluggins.js') }}"></script>.
Initjs (Custom js)
<!-- app js -->
<script src="{{ URL::asset('build/js/app.js') }}"></script>
Add Package
npm i flatpickr --save
Remove Package
npm uninstall 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">
© Steex.
Design & Develop by Themesbrand