Pickers

Pickers provide a simple way for users to select a value, or set of values from a pre-determined set. Typically, pickers are used for selecting a date or a range of dates.

Pickers rely on the Bootstrap Date Range Picker library. Please see the library documentation for more information.

Range

Container(s) .input-text-wrap
Required .is-calendar
States .is-focused .has-value
<div class="input-text-wrap is-calendar has-value">
<label class="input-text-label" for="input-date-range">Dates</label>
<input id="input-date-range" type="text" value="Select dates">
</div>
$("#input-date-range").daterangepicker();
view raw picker-range.js hosted with ❤ by GitHub

Single

Container(s) .input-text-wrap
Required .is-calendar
States .is-focused .has-value
<div class="input-text-wrap is-calendar has-value">
<label class="input-text-label" for="input-date-range-single">Date</label>
<input id="input-date-range-single" type="text" value="11/29/2016">
</div>
$("#input-date-range-single").daterangepicker({
singleDatePicker: true
});

Predefined

Container(s) .input-text-wrap
Required .is-calendar
States .is-focused .has-value
<div class="input-text-wrap is-calendar has-value">
<label class="input-text-label" for="input-date-range-predefined">Dates</label>
<input id="input-date-range-predefined" type="text" value="11/29/2016">
</div>
$("#input-date-range-predefined").daterangepicker({
ranges: {
"Last 7 Days": [moment().subtract(6, "days"), moment()],
"Last 30 Days": [moment().subtract(29, "days"), moment()],
"Last 90 Days": [moment().subtract(89, "days"), moment()]
},
showCustomRangeLabel: false,
alwaysShowCalendars: true
});