Explore Our Templates 🚀
Date Picker
A JavaScript component for choosing date ranges, dates and times.
Date-Range Picker
A date/time picker for react (using bootstrap). This is a react wrapper around an existing bootstrap library
<form action="#">
<div class="form-group">
<label class="form-label">Date Range Picker</label>
<input class="form-control" type="text" name="daterange" value="01/01/2018 - 01/15/2018" />
</div>
<div class="form-group">
<label class="form-label">Date Range Picker With Times</label>
<input class="form-control" type="text" name="datetimes" />
</div>
<div class="form-group">
<label class="form-label">Single Date Picker</label>
<input class="form-control" type="text" name="birthday" value="10/24/1984" />
</div>
<div class="form-group">
<label class="form-label">Limit Selectable Dates</label>
<input class="form-control input-limit-datepicker" type="text" name="daterange" value="06/01/2018 - 06/07/2018" />
</div>
<div class="form-group">
<label class="form-label">Predefined Date Ranges</label>
<div id="reportrange" class="form-control text-truncate">
<span></span>
</div>
</div>
<div class="form-group">
<label class="form-label">Time Select</label>
<input class="form-control input-timepicker" type="text" name="time" />
</div>
</form><!-- Daterangepicker JS -->
<script src="vendors/moment/min/moment.min.js"></script>
<script src="vendors/daterangepicker/daterangepicker.js"></script>
$(function() {
"use strict";
/* Date range with a callback*/
$('input[name="daterange"]').daterangepicker({
"cancelClass": "btn-secondary",
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
/* Date range picker with times*/
$('input[name="datetimes"]').daterangepicker({
timePicker: true,
startDate: moment().startOf('hour'),
endDate: moment().startOf('hour').add(32, 'hour'),
"cancelClass": "btn-secondary",
locale: {
format: 'M/DD hh:mm A'
}
});
/* Single table*/
$('input[name="single-date"]').daterangepicker({
singleDatePicker: true,
timePicker: true,
startDate: moment().startOf('hour'),
showDropdowns: true,
minYear: 1901,
"cancelClass": "btn-secondary",
locale: {
format: 'MM/DD/YYYY hh:mm A'
}
});
/* Single table*/
$('input[name="single-date-pick"]').daterangepicker({
singleDatePicker: true,
startDate: moment().startOf('hour'),
showDropdowns: true,
minYear: 1901,
"cancelClass": "btn-secondary",
locale: {
format: 'MM/DD/YYYY'
}
});
/* Single table*/
$('input[name="birthday"]').daterangepicker({
singleDatePicker: true,
timePicker: true,
showDropdowns: true,
minYear: 1901,
"cancelClass": "btn-secondary",
maxYear: parseInt(moment().format('YYYY'),10)
}, function(start, end, label) {
var years = moment().diff(start, 'years');
alert("You are " + years + " years old!");
});
$('input[name="single"]').daterangepicker({
singleDatePicker: true,
locale: {
cancelLabel: 'Clear'
}
});
/* Limit selectable dates*/
$('.input-limit-datepicker').daterangepicker({
format: 'MM/DD/YYYY',
minDate: '06/01/2018',
maxDate: '06/30/2018',
buttonClasses: ['btn', 'btn-sm'],
"cancelClass": "btn-secondary",
dateLimit: {
days: 6
}
});
/* Predefind range*/
var start = moment().subtract(29, 'days');
var end = moment();
function cb(start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
},cb);
cb(start, end);
/* Time picker*/
$('.input-timepicker').daterangepicker({
timePicker: true,
timePicker24Hour: true,
timePickerIncrement: 1,
timePickerSeconds: true,
locale: {
format: 'HH:mm:ss'
}
}).on('show.daterangepicker', function (ev, picker) {
picker.container.find(".calendar-table").hide();
});
/* Time picker*/
$('.input-single-timepicker').daterangepicker({
timePicker: true,
singleDatePicker: true,
timePicker24Hour: true,
timePickerIncrement: 1,
timePickerSeconds: true,
locale: {
format: 'HH:mm:ss'
}
}).on('show.daterangepicker', function (ev, picker) {
picker.container.find(".calendar-table").hide();
});
});<template>
<BForm>
<BFormGroup label="Date Range Picker" label-for="datePicker-1" class="mb-3">
<HkDateRangePicker
id="datePicker-1"
:dateRange="dateRangeForEx1"
:locale-data="{ format: 'mm/dd/yyyy' }"
:time-picker24-hour="false"
:linked-calendars="true"
/>
</BFormGroup>
<BFormGroup label="Date Range Picker With Times" label-for="datePicker-2" class="mb-3">
<HkDateRangePicker
id="datePicker-2"
:dateRange="dateRangeForEx2"
:locale-data="{ format: 'm/dd hh:mm TT' }"
:time-picker="true"
:time-picker24-hour="false"
/>
</BFormGroup>
<BFormGroup label="Single Date Picker" label-for="datePicker-3" class="mb-3">
<HkDateRangePicker
id="datePicker-3"
:date-range="{ startDate: '10/18/1984' }"
:single-date-picker="true"
:show-dropdowns="true"
:time-picker="true"
:time-picker24-hour="false"
/>
</BFormGroup>
<BFormGroup label="Time Select" label-for="datePicker-4" class="mb-3">
<HkDateRangePicker
id="datePicker-4"
:date-range="dateRangeForEx2"
:locale-data="{ format: 'hh:mm:ss' }"
:show-dropdowns="true"
:time-picker="true"
:time-picker-seconds="true"
:time-picker24-hour="false"
:timePickerOnly="true"
/>
</BFormGroup>
</BForm>
</template>
<script>
import moment from "moment";
export default {
setup() {
const dateRangeForEx1 = ref({
startDate: "01/01/2024",
endDate: "01/15/2024",
});
const dateRangeForEx2 = ref({
startDate: moment().startOf("hour").toDate(),
endDate: moment().startOf("hour").add(32, "hour").toDate(),
});
return {
dateRangeForEx1,
dateRangeForEx2,
};
},
};
</script><template>
<BForm>
<BFormGroup label="Date Range Picker" label-for="datePicker-1" class="mb-3">
<HkDateRangePicker
id="datePicker-1"
:dateRange="dateRangeForEx1"
:locale-data="{ format: 'mm/dd/yyyy' }"
:time-picker24-hour="false"
:linked-calendars="true"
/>
</BFormGroup>
<BFormGroup label="Date Range Picker With Times" label-for="datePicker-2" class="mb-3">
<HkDateRangePicker
id="datePicker-2"
:dateRange="dateRangeForEx2"
:locale-data="{ format: 'm/dd hh:mm TT' }"
:time-picker="true"
:time-picker24-hour="false"
/>
</BFormGroup>
<BFormGroup label="Single Date Picker" label-for="datePicker-3" class="mb-3">
<HkDateRangePicker
id="datePicker-3"
:date-range="{ startDate: '10/18/1984' }"
:single-date-picker="true"
:show-dropdowns="true"
:time-picker="true"
:time-picker24-hour="false"
/>
</BFormGroup>
<BFormGroup label="Time Select" label-for="datePicker-4" class="mb-3">
<HkDateRangePicker
id="datePicker-4"
:date-range="dateRangeForEx2"
:locale-data="{ format: 'hh:mm:ss' }"
:show-dropdowns="true"
:time-picker="true"
:time-picker-seconds="true"
:time-picker24-hour="false"
:timePickerOnly="true"
/>
</BFormGroup>
</BForm>
</template>
<script>
import moment from "moment";
export default {
setup() {
const dateRangeForEx1 = ref({
startDate: "01/01/2024",
endDate: "01/15/2024",
});
const dateRangeForEx2 = ref({
startDate: moment().startOf("hour").toDate(),
endDate: moment().startOf("hour").add(32, "hour").toDate(),
});
return {
dateRangeForEx1,
dateRangeForEx2,
};
},
};
</script><form action="#">
<div class="form-group">
<label class="form-label">Date Range Picker</label>
<input class="form-control" type="text" name="daterange" value="01/01/2018 - 01/15/2018" />
</div>
<div class="form-group">
<label class="form-label">Date Range Picker With Times</label>
<input class="form-control" type="text" name="datetimes" />
</div>
<div class="form-group">
<label class="form-label">Single Date Picker</label>
<input class="form-control" type="text" name="birthday" value="10/24/1984" />
</div>
<div class="form-group">
<label class="form-label">Limit Selectable Dates</label>
<input class="form-control input-limit-datepicker" type="text" name="daterange" value="06/01/2018 - 06/07/2018" />
</div>
<div class="form-group">
<label class="form-label">Predefined Date Ranges</label>
<div id="reportrange" class="form-control text-truncate">
<span></span>
</div>
</div>
<div class="form-group">
<label class="form-label">Time Select</label>
<input class="form-control input-timepicker" type="text" name="time" />
</div>
</form>