Do you know the latest update of 2022? A overview of our is now available on YouTube

Components

## Date & Time Picker

Examples and usage guidelines for date and time picker for form.

#### Date Picker

Using `.date-picker`, `.date-picker-alt` class in `<input>` element to enable datepicker.
We have used Bootstrap Datepicker for date picker, here you see full documentation here.

Datepicker
Date format `mm/dd/yyyy`
Datepicker Alt
Date format `yyyy-mm-dd`
Datepicker with Icon
Date format `yyyy-mm-dd`
Datepicker Alt with Icon
Date format `mm/dd/yyyy`

Additionally you can use `data-date-format=""` attribute of `<input>` element to formate date. Default format `mm/dd/yyyy`.

###### Code Example

    <div class="form-group">
        <label class="form-label">Datepicker</label>
        <div class="form-control-wrap">
            <input type="text" class="form-control date-picker">
        </div>
        <div class="form-note">Date format <code>mm/dd/yyyy</code></div>
    </div>

#### Date Range Picker

Use `.date-picker-range` and `.input-daterange` (must have) class in `<div>` element and Two `<input>` tag inside `.date-picker-range` to enable datepicker Range.

Datepicker Range
TO

###### Code Example

    <div class="form-group">
        <label class="form-label">Datepicker Range</label>
        <div class="form-control-wrap">
            <div class="input-daterange date-picker-range input-group">
                <input type="text" class="form-control" />
                <div class="input-group-addon">TO</div>
                <input type="text" class="form-control" />
            </div>
        </div>
    </div>

#### Time Picker

Using `.time-picker` class in `<select>` element to enable time picker.
We have used Bootstrap Timepicker for date picker, here you see full documentation here.

Timepicker

Additionally you can use `some_thing_else` attribute of `<input>` element.

###### Code Example

    <div class="form-group">
        <label class="form-label">Timepicker</label>
        <div class="form-control-wrap">
            <input type="text" class="form-control time-picker" placeholder="Input placeholder">
        </div>
    </div>

##### Select Your Countryy

- Argentina
- Australia
- Bangladesh
- Canada (English)
- Centrafricaine
- China
- France
- Germany
- Iran
- Italy
- México
- Philippines
- Portugal
- South Africa
- Spain
- Switzerland
- United Kingdom
- United State