I want to make a range date picker with bootstrap with single calendar. Now I have it but with two calendars
$('#datepicker').datepicker({
});
<link href=".8.0/css/bootstrap-datepicker.css" rel="stylesheet"/>
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>
<script src=".1.1/jquery.min.js"></script>
<script src=".8.0/js/bootstrap-datepicker.min.js"></script>
I want to make a range date picker with bootstrap with single calendar. Now I have it but with two calendars
$('#datepicker').datepicker({
});
<link href="https://cdnjs.cloudflare./ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/>
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
How can I make it with only one calendar? I didn't find answer anywhere
Share Improve this question asked May 19, 2023 at 1:13 Regular UserRegular User 5114 silver badges17 bronze badges2 Answers
Reset to default 6Here is an answer for everybody who need it
$('#date').datepicker({
startView: 0,
minViewMode: 0,
maxViewMode: 2,
multidate: true,
multidateSeparator: "-",
autoClose: true,
beforeShowDay: highlightRange,
}).on("changeDate", function(event) {
var dates = event.dates,
elem = $('#date');
if (elem.data("selecteddates") == dates.join(",")) return;
if (dates.length > 2) dates = dates.splice(dates.length - 1);
dates.sort(function(a, b) { return new Date(a).getTime() - new Date(b).getTime() });
elem.data("selecteddates", dates.join(",")).datepicker('setDates', dates);
});
function highlightRange(date) {
var selectedDates = $('#date').datepicker('getDates');
if (selectedDates.length === 2 && date >= selectedDates[0] && date <= selectedDates[1]) {
return 'highlighted';
}
return '';
}
.highlighted {
background-color: #99ccff;
}
<link href="https://cdnjs.cloudflare./ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/>
<input type="text" id="date">
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
Can be achieved usingBootstrap and Datepicker libraries
<!DOCTYPE html>
<html>
<head>
<title>Date Range Picker</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr/npm/daterangepicker/daterangepicker.css">
</head>
<body>
<div class="container">
<h1>Date Range Picker</h1>
<div class="input-group">
<input type="text" class="form-control" id="date-range" placeholder="Select Date Range">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-calendar"></i>
</span>
</div>
</div>
</div>
<script src="https://code.jquery./jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/moment.min.js"></script>
<script src="https://cdn.jsdelivr/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
$(document).ready(function() {
$('#date-range').daterangepicker({
opens: 'left',
drops: 'down',
autoApply: true,
locale: {
format: 'YYYY-MM-DD',
separator: ' - ',
applyLabel: 'Apply',
cancelLabel: 'Cancel',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom',
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 0
}
});
});
</script>
</body>
</html>