# Datepicker

Datepicker is based on the Flatpickr plugin, a lightweight, powerful javascript datetime picker.

Official Documentation

## Usage

### CSS

In order to use this plugin on your page you will need to include the following styles in the Page CSS area from the page’s head section:

    <link rel="stylesheet" href="../../assets/libs/flatpickr/dist/flatpickr.min.css">

### JS

In order to use this plugin on your page you will need to include the following script in the “Page JS” area from the page’s footer:

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

### Initialization

In order to initialize the datepicker plugin add the `data-toggle="date"` on any text input.

## Examples

### Date

Show code

     <input type="text" class="form-control" data-toggle="date" placeholder="Select date">

### Datetime

Show code

     <input type="text" class="form-control" data-toggle="datetime" placeholder="Select date and time">

### Time

Show code

     <input type="text" class="form-control" data-toggle="time" placeholder="Select time">