Flatpickr
OverviewOfficial Website
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 |
|
DateTime |
|
Human-Friendly Dates |
|
MinDate and MaxDate |
|
Default Date |
|
Disabling Dates |
|
Selecting Multiple Dates |
|
Range |
|
Inline |
|
Timepickr Examples
Title | HTML |
---|---|
Basic Timepicker |
|
24-hour Time Picker |
|
Time Picker w/ Limits |
|
Preloading Time |
|
Inline |
|