I have seen this question being asked here: Alert User When Selecting Disabled Date Unfortunately, there is nothing to glean from the answers provided.
We have a requirement to prevent users from selecting from datepicker, days longer than 60 days.
Users are also not allowed to select days greater than current date.
Days longer than 60 days are grayed out just as days greater than today's date are grayed out.
The script below shows that this works just fine as far as those conditions are concerned.
However, because our users cannot select previous dates longer than 60 days and cannot select days greater than current date, they report that our system is not allowing them to select the dates they prefer.
Our proposed solution is give a user an alert that those dates are not allowed when attempting to click on them.
Any ideas how to add an alert message to the script below that informs a user that the dates s/he is clicking on is not allowed?
Below is the working script.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({ minDate: -60, maxDate: 0 });
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
If it helps, this is a jQuery UI Datepicker.
Many thanks in advance
it took a little work but I managed to get it done. Some features were also added to the code such as disabling weekends, if not useful just remove
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<style>
.ui-datepicker-calendar .ui-state-disabled {
pointer-events: auto;
cursor: not-allowed !important;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<script>
$(function() {
var today = new Date();
var maxDate = today;
var minDate = new Date(today.getTime() - 60 * 24 * 60 * 60 * 1000);
$('#datepicker').datepicker({
maxDate: maxDate,
minDate: minDate,
beforeShowDay: function(date) {
var day = date.getDay();
// Disable weekends
return [(day != 0 && day != 6)];
},
onSelect: function(dateText, inst) {
// Check if selected date is disabled
var selectedDate = $(this).datepicker('getDate');
var today = new Date();
if (selectedDate < minDate || selectedDate > maxDate || selectedDate.getDay() == 0 || selectedDate.getDay() == 6) {
alert("Please select a valid date!");
$(this).val("");
}
}
});
// Add click event listener to disabled dates
$(document).on('click', '.ui-datepicker-unselectable', function(e) {
e.preventDefault();
alert("This date is not available for selection!");
});
});
</script>
</head>
<body>
<p>Data: <input type="text" id="datepicker"></p>
</body>
</html>