# Bootstrap Datepicker

-
Pro Component

The Bootstrap flatpickr is a lightweight and powerful datetime picker.

## Usage

In order to use this plugin on your page you will need to include the following script:

Copy

    <script src="/assets/js/plugins/flatpickr.min.js"></script>

## Initialization

Add the `.datepicker` class on the text input that you want to become a datepicker.

## Range datepicker

Copy

    <input class="form-control datepicker" placeholder="Please select date" type="text" onfocus="focused(this)" onfocusout="defocused(this)">

    <script>
    if (document.querySelector('.datepicker')) {
        flatpickr('.datepicker', {
        mode: "range"
        });
    }
    </script>

Sun Mon Tue Wed Thu Fri Sat
31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 1 2 3 4 5 6 7 8 9 10 11