How to create a Single Calendar for Range selection in DateRangePicker
Today, we will learn How to create a Single Calendar for Range selection in DateRangePicker. In this tutorial, we use this date range picker component. daterangepicker by default two calendars show. and many times we use one calendar show with multiple date selections.
In this tutorial, we will cover only one calendar and be able to use the less than and great than(< >) buttons to select next/previous months, when selecting start and end date. date range picker is given the option for singleDatePicker: true, but singleDatePicker is only a single calendar display. and we select multiple dates.
Also read: Bootstrap daterangepicker example with demo using daterangepicker.js
Example
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>How to create Single Calendar for Range selection in DateRangePicker</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
</head>
<body>
<h1>How to create Single Calendar for Range selection in DateRangePicker</h1>
<input type="text" name="regervation" id="regervation" placeholder="Please select regervation date!"/>
<div id="displayRegervation"></div>
</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
$(function() {
$('#regervation').daterangepicker({
"autoapply": true,
"linkedCalendars": false,
},
function(start, end, label) {
$('#displayRegervation').text('Registration date is: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
$('.drp-calendar.right').hide();
$('.drp-calendar.left').addClass('single');
$('.calendar-table').on('DOMSubtreeModified', function() {
var el = $(".prev.available").parent().children().last();
if (el.hasClass('next available')) {
return;
}
el.addClass('next available');
el.append('<span></span>');
});
});
</script>
</html>Also read: How to Display Loading Image While Page Loads using jQuery
Output
