日期范围选择器（daterangepicker）动态限制可选日期的交互实现咨询

嗨，我完全get到你的需求啦——你希望用户在选择日期范围的起始日期后，立刻限制结束日期只能选到昨天（当前日期的前一天），而不是等到点击「应用」按钮才生效，对吧？结合你给出的现有代码，我帮你调整实现这个逻辑：

首先，核心思路是：

• 预先计算出两个关键日期：30天前的最小可选日期，以及昨天的最大可选结束日期
• 监听日期选择的select.daterangepicker事件，在用户选中任意一个日期后，动态锁定结束日期的上限为昨天
• 完善「应用」按钮的逻辑，确保输入框能正确显示选中的日期范围

修改后的完整代码如下：

$(function() {
    // 计算30天前的最小可选日期
    var allowedDates = new Date();
    allowedDates.setDate(allowedDates.getDate() - 30);
    
    // 计算昨天的日期，作为结束日期的上限
    var yesterday = new Date();
    yesterday.setDate(yesterday.getDate() - 1);

    $('input[name="from_to_dates"]').daterangepicker({
        autoUpdateInput: false,
        minDate: allowedDates,
        maxDate: yesterday, // 初始设置结束日期上限为昨天
        opens: 'right',
        locale: {
            cancelLabel: 'Clear'
        }
    })
    .on('show.daterangepicker', function(ev, picker) {
        picker.container.addClass('my-custom-css');
    })
    .on('select.daterangepicker', function(ev, picker) {
        // 用户选中日期后，强制设置结束日期的上限为昨天
        picker.maxDate = yesterday;
        // 如果当前选中的结束日期超过昨天，自动调整为昨天
        if (picker.endDate > yesterday) {
            picker.setEndDate(yesterday);
        }
    })
    .on('apply.daterangepicker', function(ev, picker) {
        // 点击应用后，更新输入框显示选中的日期范围
        $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
    })
    .on('cancel.daterangepicker', function(ev, picker) {
        // 点击清除后，清空输入框
        $(this).val('');
    });
});

关键逻辑说明： #

• 初始限制：在daterangepicker的配置里直接设置maxDate: yesterday，确保打开选择器时，未来日期（今天及以后）本来就是不可选的
• 动态锁定：通过select.daterangepicker事件，在用户选中任意日期后再次确认上限，防止出现异常情况导致未来日期可选中
• 异常修正：如果用户选中的结束日期不小心超过了昨天（比如通过手动输入），代码会自动将其调整为昨天，保证符合规则
• 交互完善：补全了「应用」和「清除」按钮的逻辑，让输入框的显示更符合预期

这样设置后，当用户今天（2024年9月20日）选中9月5日作为起始日期时，结束日期只能选到9月19日，完全符合你的要求哦！

备注：内容来源于stack exchange，提问作者Raghavendra Naidu