logo logo-dark
AB
AB
DashLite Dashboard
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.

Date format mm/dd/yyyy
Date format yyyy-mm-dd
Date format yyyy-mm-dd
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.

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.

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>