我看到这里有人问这个问题： 选择禁用日期时提醒用户 不幸的是，从提供的答案中没有什么可收集的。
我们有一个要求，防止用户从日期选择器中选择超过 60 天的天数。
用户也不允许选择大于当前日期的日期。
超过 60 天的天数会变灰，就像比今天的日期大的天数会变灰。
下面的脚本表明，就这些条件而言，它工作得很好。
但是，由于我们的用户不能选择超过 60 天的以前日期，也不能选择大于当前日期的日期，他们报告说我们的系统不允许他们选择他们喜欢的日期。
我们建议的解决方案是在尝试点击这些日期时向用户发出警告，告知这些日期是不允许的。
任何想法如何向下面的脚本添加警告消息，通知用户他/她正在点击的日期是不允许的？
下面是工作脚本。
<!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>
如果有帮助，这是一个 jQuery UI Datepicker。
非常感谢
您可以使用 jQuery UI Datepicker 的 beforeShowDay 选项来自定义日历中各个日期的外观和行为。日历中的每一天都会调用 beforeShowDay 函数，并接收一个 Date 对象作为其参数。您可以使用此函数检查日期是否在允许范围内，如果不在允许范围内，则返回一个带有类名的数组和一个可选的工具提示消息，以指示日期被禁用以及原因。
要在单击禁用日期时显示警报消息，您可以将 onSelect 函数添加到 Datepicker 以检查所选日期是否被禁用，如果是，则向用户显示警报消息。
这是一个示例，说明如何修改现有脚本以添加这些功能：
$(function() {
var today = new Date();
var sixtyDaysAgo = new Date();
sixtyDaysAgo.setDate(today.getDate() - 60);
$('#datepicker').datepicker({
minDate: sixtyDaysAgo,
maxDate: today,
beforeShowDay: function(date) {
var date1 = new Date();
date1.setDate(today.getDate() - 60);
var date2 = new Date();
date2.setDate(today.getDate() + 1);
if (date < date1 || date > date2) {
return [false, 'disabled', 'This date is outside the allowed range'];
} else {
return [true, ''];
}
},
onSelect: function(dateText, inst) {
var selectedDate = $(this).datepicker('getDate');
var disabledDates = $(this).datepicker('option', 'beforeShowDay');
if (disabledDates(selectedDate)[0] === false) {
alert('This date is outside the allowed range');
$(this).val('');
}
}
});
});
在这个修改后的脚本中，我们首先定义了两个Date 对象来表示今天的日期和60 天前的日期。然后我们使用这些日期来设置 Datepicker 的 minDate 和 maxDate 选项。
接下来，我们定义 beforeShowDay 函数来检查日期是否在允许的范围内。如果日期超出范围，我们返回一个包含 false 值的数组以禁用日期，禁用类将日期设置为灰色，并返回一条工具提示消息来解释日期被禁用的原因。
最后，我们向 Datepicker 添加一个 onSelect 函数，用于检查所选日期是否被禁用，如果是，则向用户显示一条警告消息并清除输入字段。
请注意，onSelect 函数还通过使用所选日期调用 beforeShowDay 函数并检查返回数组的第一个元素来检查日期是否被禁用。这是必要的，因为 onSelect 函数在 beforeShowDay 函数之前被调用，后者还没有机会将日期标记为禁用。
<!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>
$(function() {
$("#datepicker").datepicker({
minDate: -60,
maxDate: 0
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>更简单的方法，看看这是否是您解决请求所需要的。