logologo-dark
logologo-dark

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>
Switch Demo Layout
Use Case Concept
Preview Settings
Direction Change
LTR Mode
RTL Mode
Main UI Style
Default
Clean
Shady
Softy
Header Style
White
Light
Dark
Theme
Header Option
Regular
Fixed
Primary Skin
Default
Blue
Egyptian
Purple
Green
Red
Skin Mode
Light Skin
Dark Skin
Looking for functional script for Investment Platform? Check out
Investorm
Looking for Advanced
Investment Platform?