在网页开发中，日期选择器是常见的交互组件。daterangepicker 是一个功能强大且灵活的 jQuery 插件，常用于选择单个日期或日期范围。然而，在某些场景下，我们需要两个或多个日期输入框之间存在逻辑关联，例如一个日期选择器的最大可选日期需要根据另一个日期选择器的选择结果动态调整。本文将重点介绍如何实现这一需求，确保用户选择的日期符合业务逻辑。
假设我们有两个日期输入框，分别命名为 input_one 和 input_two。我们希望 input_two 的最大可选日期（maxDate）不能晚于 input_one 所选的日期。
首先，我们通常会为这两个输入框独立初始化 daterangepicker：
HTML 结构：
<input type="text" name="input_one" id="input_one" /> <input type="text" name="input_two" id="input_two" />
初始 JavaScript 配置：
// 初始化 input_one 的 daterangepicker
$('input[name="input_one"]').daterangepicker({
minDate: moment(),
timePicker: false,
singleDatePicker: true,
autoApply: true,
autoUpdateInput: true,
locale: {
format: 'DD-MM-YYYY'
}
}, function(start, end, label){
// 这里的回调函数主要用于处理 input_one 的选择结果，
// 但并未直接更新 input_two 的 maxDate
var selectedEndDate = end.format('DD-MM-YYYY');
$('#input_one').data('daterangepicker').setEndDate(selectedEndDate);
});
// 初始化 input_two 的 daterangepicker
$('input[name="input_two"]').daterangepicker({
minDate: moment(), // 默认最小日期为今天
timePicker: false,
singleDatePicker: true,
autoApply: true,
autoUpdateInput: true,
locale: {
format: 'DD-MM-YYYY'
}
});上述代码中，input_two 的 maxDate 属性是缺失的，或者说它没有被动态设置。这意味着用户在 input_two 中可以随意选择任何日期（受 minDate: moment() 限制，即不能选择今天之前的日期），而不会受到 input_one 选择日期的约束。这与我们的需求不符。
为了实现 input_two 的 maxDate 随 input_one 的选择而变化，我们需要在 input_one 的值发生变化时，重新配置或更新 input_two 的 daterangepicker 实例。最直接有效的方法是监听 input_one 的 change 事件。
当 input_one 的值发生变化时，我们会获取其当前值，并使用这个值来重新初始化 input_two 的 daterangepicker，同时设置其 maxDate 属性。
核心 JavaScript 代码：
$('#input_one').on('change', function(){
// 确保 input_one 有值才进行更新
if ($(this).val()) {
$('#input_two').daterangepicker({
// 将 input_one 的值解析为 Moment 对象，并设置为 input_two 的 maxDate
maxDate: moment($('#input_one').val(), "DD-MM-YYYY"),
minDate: moment(), // input_two 的最小日期仍为今天
timePicker: false,
singleDatePicker: true,
autoApply: true,
autoUpdateInput: true,
locale: {
format: 'DD-MM-YYYY'
}
});
} else {
// 如果 input_one 被清空，可以考虑重置 input_two 的 maxDate 或禁用 input_two
// 例如，重置为默认无限制（除了minDate）或禁用
$('#input_two').daterangepicker({
minDate: moment(),
timePicker: false,
singleDatePicker: true,
autoApply: true,
autoUpdateInput: true,
locale: {
format: 'DD-MM-YYYY'
}
// maxDate 不再设置，或设置为一个非常远的未来日期
});
}
});$('#input_one').on('change', function(){ ... });
moment($('#input_one').val(), "DD-MM-YYYY")
maxDate: moment(...)
minDate: moment()
将 HTML 和 JavaScript 代码整合，形成一个完整的可运行示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daterangepicker 动态 MaxDate 教程</title>
<!-- 引入 jQuery -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<!-- 引入 Moment.js -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<!-- 引入 daterangepicker CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<!-- 引入 daterangepicker JS -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input[type="text"] { padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 15px; width: 200px; }
</style>
</head>
<body>
<h1>动态设置 Daterangepicker 的 MaxDate</h1>
<p>请先选择 "日期一"，然后观察 "日期二" 的最大可选日期限制。</p>
<div>
<label for="input_one">日期一 (MaxDate 限制日期二)</label>
<input type="text" name="input_one" id="input_one" />
</div>
<div>
<label for="input_two">日期二 (受日期一限制)</label>
<input type="text" name="input_two" id="input_two" />
</div>
<script type="text/javascript">
$(function() {
// 初始化 input_one 的 daterangepicker
$('input[name="input_one"]').daterangepicker({
minDate: moment(), // 最小日期为今天
timePicker: false,
singleDatePicker: true,
autoApply: true,
autoUpdateInput: true,
locale: {
format: 'DD-MM-YYYY'
}
}, function(start, end, label){
// 当 input_one 选择日期后，更新其显示
var selectedDate = end.format('DD-MM-YYYY');
$('#input_one').val(selectedDate);
// 触发 change 事件，以便更新 input_two
$('#input_one').trigger('change');
});
// 初始化 input_two 的 daterangepicker
// 初始时，input_two 的 maxDate 不受限制（或可设置为一个默认值）
$('input[name="input_two"]').daterangepicker({
minDate: moment(),
timePicker: false,
singleDatePicker: true,
autoApply: true,
autoUpdateInput: true,
locale: {
format: 'DD-MM-YYYY'
}
});
// 监听 input_one 的 change 事件，动态更新 input_two 的 maxDate
$('#input_one').on('change', function(){
var inputOneValue = $(this).val();
if (inputOneValue) {
// 销毁旧的 daterangepicker 实例（如果存在）
if ($('#input_two').data('daterangepicker')) {
$('#input_two').data('daterangepicker').remove();
}
// 重新初始化 input_two 的 daterangepicker，设置新的 maxDate
$('#input_two').daterangepicker({
maxDate: moment(inputOneValue, "DD-MM-YYYY"),
minDate: moment(),
timePicker: false,
singleDatePicker: true,
autoApply: true,
autoUpdateInput: true,
locale: {
format: 'DD-MM-YYYY'
}
});
// 确保 input_two 的当前值在新的 maxDate 范围内
// 如果 input_two 的当前值超出了新的 maxDate，则清空或重置
var currentInputTwoDate = $('#input_two').val();
if (currentInputTwoDate) {
var currentMoment = moment(currentInputTwoDate, "DD-MM-YYYY");
var maxMoment = moment(inputOneValue, "DD-MM-YYYY");
if (currentMoment.isAfter(maxMoment)) {
$('#input_two').val(''); // 清空或设置为 maxMoment
}
}
} else {
// 如果 input_one 被清空，重置 input_two 的 daterangepicker
if ($('#input_two').data('daterangepicker')) {
$('#input_two').data('daterangepicker').remove();
}
$('#input_two').daterangepicker({
minDate: moment(),
timePicker: false,
singleDatePicker: true,
autoApply: true,
autoUpdateInput: true,
locale: {
format: 'DD-MM-YYYY'
}
});
$('#input_two').val(''); // 清空 input_two 的值
}
});
});
</script>
</body>
</html>通过监听第一个 daterangepicker 输入框的 change 事件，并在事件触发时重新初始化第二个 daterangepicker 并动态设置其 maxDate 属性，我们可以有效地实现两个日期输入框之间的联动。这种方法确保了日期选择的逻辑正确性，提升了用户界面的交互性和健壮性。在实际应用中，根据具体业务需求，还可以进一步优化 minDate 的设置以及对边界情况的处理。
以上就是动态设置 Daterangepicker 的 maxDate：实现日期输入联动的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
594
收藏
