Hi nauna,
Use a variable to store selected dates in an array.
Whenever dates are selected check the length of the data in the datepicker and if it is more than 3, then set Dates from the stored array and notify user.
Check this example. Now please take its reference and correct your code.
HTML
<head>
<title>Set Bootstrap Datepicker dates selection limit</title>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript">
$(function () {
var selectedDates = [];
datePicker = $('[id*=TextBox1]').datepicker({
startDate: new Date(),
multidate: true,
format: "mm/dd/yyyy",
daysOfWeekHighlighted: "5,6",
language: 'en'
});
datePicker.on('changeDate', function (e) {
if (e.dates.length <= 3) {
selectedDates = e.dates;
} else {
datePicker.data('datepicker').setDates(selectedDates);
alert('You can only select 3 dates.');
}
});
});
</script>
<input id="TextBox1" type="text" readonly="readonly" placeholder="Date" />
</body>
</html>
Demo
Note: You have to replace the html textbox with ASP TextBox.
There is also another way to do is set limit for multiple date selection.
Just set multidate option with any number that you want to set as multiple date limit.
You will be able to select maximum three dates only.
But have one demerit is, it will remove the first selection upon the 4th date selection.
JavaScript
<script type="text/javascript">
$(function () {
var selectedDates = [];
datePicker = $('[id*=TextBox1]').datepicker({
startDate: new Date(),
multidate: 3,
format: "mm/dd/yyyy",
daysOfWeekHighlighted: "5,6",
language: 'en'
});
});
</script>
