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:

<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)">

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