Bootstrap Datepicker

The Bootstrap datepicker is tied to a standard form input field. In order the Bootstrap datepicker to work, focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input’s value.
Keep reading our Bootstrap Datepicker examples and learn how to use this plugin.

Usage

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

<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

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