如何在选择input_one日期后设置input_two的daterangepicker maxDate

你当前的代码错误地修改了input_one自身的日期选择器实例，而不是目标的input_two。要实现选完input_one后，input_two无法选择超过该日期的选项，需要在input_one的回调中操作input_two的daterangepicker实例，调用setMaxDate方法来设置最大可选日期。

修正后的完整代码 #

HTML（无需修改）

<input type="text" name="input_one" id="input_one" />
<input type="text" name="input_two" id="input_two" />

JavaScript

// 初始化第一个日期选择器
$('input[name="input_one"]').daterangepicker({
    minDate: moment(),
    timePicker: false,
    singleDatePicker: true,
    autoApply: true,
    autoUpdateInput: true,
    locale: {
        format: 'DD-MM-YYYY'
    }
}, function(start, end, label) {
    // 获取第二个日期选择器的实例
    const inputTwoPicker = $('input[name="input_two"]').data('daterangepicker');
    
    // 将第二个选择器的maxDate设置为第一个选择器选中的日期
    // singleDatePicker模式下start和end是同一个值，直接用start即可
    inputTwoPicker.setMaxDate(start);
    
    // 可选：如果用户清空了第一个选择器，重置第二个选择器的maxDate限制
    if (!start) {
        inputTwoPicker.setMaxDate(false);
    }
});

// 初始化第二个日期选择器
$('input[name="input_two"]').daterangepicker({
    minDate: moment(),
    timePicker: false,
    singleDatePicker: true,
    autoApply: true,
    autoUpdateInput: true,
    locale: {
        format: 'DD-MM-YYYY'
    }
});

关键说明 #

1. 目标实例正确获取：要修改的是input_two的日期选择器，所以必须通过$('input[name="input_two"]').data('daterangepicker')获取它的实例，而不是操作input_one自身。
2. 直接传入moment对象：回调中的start是moment类型的日期对象，直接传给setMaxDate比格式化后的字符串更可靠，daterangepicker内部会自动适配格式。
3. 清空场景处理：补充了清空input_one时重置input_two maxDate的逻辑，避免用户清空后仍然被限制可选范围。

内容的提问来源于stack exchange，提问作者Iker