# Datepicker | Soft UI Dashboard Bootstrap @ Creative Tim
A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs.
Author: Creative Tim
Keywords: creative tim, updivision, html dashboard, laravel, html css dashboard laravel, soft ui dashboard laravel, laravel soft ui dashboard, soft ui admin, laravel dashboard, laravel admin, web dashboard, bootstrap 5 dashboard laravel, bootstrap 5, css3 dashboard, bootstrap 5 admin laravel, soft ui dashboard bootstrap 5 laravel, frontend, responsive bootstrap 5 dashboard, soft ui dashboard, soft ui laravel bootstrap 5 dashboard

# 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>

SunMonTueWedThuFriSat
311234567891011121314151617181920212223242526272829301234567891011