Date Picker
An interactive input element that allows users to easily and reliably select a date or range of dates from a graphical calendar interface.
Examples
Date picker is an interactive input element that allows users to easily and reliably select a date or range of dates from a graphical calendar interface, ensuring accurate and standardized data entry.
This is a simple date range picker with a callback.
<div class="position-relative">
<input class="form-control pe-4" type="text" name="daterange" value="01/01/2025 - 01/15/2025" />
<i class="bi bi-calendar position-absolute top-50 end-0 translate-middle-y me-3" style="pointer-events: none;"></i>
</div>
<div class="position-relative"> <input class="form-control pe-4"
type="text" name="daterange" value="01/01/2025 - 01/15/2025" />
<i class="bi bi-calendar position-absolute top-50 end-0 translate-middle-y me-3"
style="pointer-events: none;"></i> </div>
document.addEventListener('DOMContentLoaded', function() {
const input = document.querySelector('input[name="daterange"]');
$(input).daterangepicker({
opens: 'left'
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
});
document.addEventListener('DOMContentLoaded', function() { const input =
document.querySelector('input[name="daterange"]'); $(input).daterangepicker({
opens: 'left' }, 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
This example enables time selection in addition to dates, using a 12-hour format with AM/PM indicators. The initial range spans 32 hours from the current hour.
<div class="position-relative">
<input class="form-control pe-4" type="text" name="datetimes" />
<i class="bi bi-calendar position-absolute top-50 end-0 translate-middle-y me-3" style="pointer-events: none;"></i>
</div>
<div class="position-relative"> <input class="form-control pe-4"
type="text" name="datetimes" /> <i class="bi bi-calendar
position-absolute top-50 end-0 translate-middle-y me-3" style="pointer-events:
none;"></i> </div>
document.addEventListener('DOMContentLoaded', function() {
const input = document.querySelector('input[name="datetimes"]');
$(input).daterangepicker({
timePicker: true,
startDate: moment().startOf('hour'),
endDate: moment().startOf('hour').add(32, 'hour'),
locale: {
format: 'M/DD hh:mm A'
}
});
});
document.addEventListener('DOMContentLoaded', function() { const input =
document.querySelector('input[name="datetimes"]'); $(input).daterangepicker({
timePicker: true, startDate: moment().startOf('hour'), endDate:
moment().startOf('hour').add(32, 'hour'), locale: { format: 'M/DD hh:mm
A' } }); });
Single Date Picker
This configuration allows selection of a single date only, with year dropdowns limited from 1901 to the current year. A callback calculates and alerts the user's age based on the selected birthdate.
<div class="position-relative">
<input class="form-control pe-4" type="text" name="birthday" value="10/24/1984" />
<i class="bi bi-calendar position-absolute top-50 end-0 translate-middle-y me-3" style="pointer-events: none;"></i>
</div>
<div class="position-relative"> <input class="form-control pe-4"
type="text" name="birthday" value="10/24/1984" /> <i
class="bi bi-calendar position-absolute top-50 end-0 translate-middle-y me-3"
style="pointer-events: none;"></i> </div>
document.addEventListener('DOMContentLoaded', function() {
const input = document.querySelector('input[name="birthday"]');
$(input).daterangepicker({
singleDatePicker: true,
showDropdowns: true,
minYear: 1901,
maxYear: parseInt(moment().format('YYYY'),10)
}, function(start, end, label) {
var years = moment().diff(start, 'years');
alert("You are " + years + " years old!");
});
});
document.addEventListener('DOMContentLoaded', function() { const input =
document.querySelector('input[name="birthday"]'); $(input).daterangepicker({
singleDatePicker: true, showDropdowns: true, minYear: 1901, maxYear:
parseInt(moment().format('YYYY'),10) }, function(start, end, label) { var years =
moment().diff(start, 'years'); alert("You are " + years + " years
old!"); }); });
Predefined Date Ranges
This example provides a dropdown with common predefined date ranges (e.g., Today, Last 7 Days) for quick selection. The selected range updates the display text dynamically, defaulting to the last 30 days.
<div id="reportrange" style="cursor: pointer; padding: 5px 10px; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); width: 100%">
<i class="bi bi-calendar"></i>
<span></span><i class="bi bi-caret-down-fill"></i>
</div>
<div id="reportrange" style="cursor: pointer; padding: 5px 10px; border: 1px
solid var(--bs-border-color); border-radius: var(--bs-border-radius); width: 100%">
<i class="bi bi-calendar"></i> <span></span><i
class="bi bi-caret-down-fill"></i> </div>
document.addEventListener('DOMContentLoaded', function() {
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'));
}
const reportrange = document.querySelector('#reportrange');
$(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);
});
document.addEventListener('DOMContentLoaded', function() { 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')); } const reportrange =
document.querySelector('#reportrange'); $(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); });
Input Initially Empty
This setup starts with an empty input field and prevents automatic updates on selection. Applying a range manually populates the field, while canceling clears it entirely.
<div class="position-relative">
<input class="form-control pe-4" type="text" name="datefilter" value="" />
<i class="bi bi-calendar position-absolute top-50 end-0 translate-middle-y me-3" style="pointer-events: none;"></i>
</div>
<div class="position-relative"> <input class="form-control pe-4"
type="text" name="datefilter" value="" /> <i class="bi
bi-calendar position-absolute top-50 end-0 translate-middle-y me-3"
style="pointer-events: none;"></i> </div>
document.addEventListener('DOMContentLoaded', function() {
const input = document.querySelector('input[name="datefilter"]');
$(input).daterangepicker({
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
}
});
$(input).on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
});
$(input).on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});
});
document.addEventListener('DOMContentLoaded', function() { const input =
document.querySelector('input[name="datefilter"]'); $(input).daterangepicker({
autoUpdateInput: false, locale: { cancelLabel: 'Clear' } });
$(input).on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' +
picker.endDate.format('MM/DD/YYYY')); }); $(input).on('cancel.daterangepicker',
function(ev, picker) { $(this).val(''); }); });
On this page
ESC
