Flatpickr

flatpickr is a lightweight and powerful DateTime picker.

please refer flatpickr documentation (opens new window) to learn more about plugin

How to use

Step 1

include following css code in the page you want to use inside @section('header_styles') section

<link href="{{ asset('vendors/flatpickr/css/flatpickr.min.css') }}" rel="stylesheet" type="text/css" />

Step 2

include following js code at @section('footer_scripts') section

<script src="{{ asset('vendors/flatpickr/js/flatpickr.min.js') }}" type="text/javascript"></script>

Step 3

write HTML markup for it.

ex:

<div class="form-group">
    <label for="fancy">Date Selector :</label>
    <div class="input-group">
        <div class="input-group-append">
            <span class="input-group-text"><i class="livicon" data-name="calendar" data-size="16" data-c="#555555" data-hc="#555555" data-loop="true"></i></span>
        </div>
        <input class="flatpickr flatpickr-input form-control" type="text" placeholder="select date">
    </div>
</div>

Step 4

now, we need to initialize the plugin

you can place below code inside footer_scripts section or for better management, you can keep in a separate js file and reference that file in the current page.

Note: be sure to place initialization code below plugin js file

flatpickr(".flatpickr");

i.e. we are initializing it on flatpickr class

Output

more examples

We have added many more examples and customization.

you can find code in following pages resources/views/admin/advanced_datepickers.blade.php and resources/js/pages/custom_datepicker.js