daterangepicker接收视图传值后月份显示异常，求解决方案

问题分析 #

直接通过$('#datefilter2').val(datefilter2)给输入框赋值，只会修改输入框的表面文本，不会同步daterangepicker内部维护的日期状态（包括月份下拉框的选中状态）。插件的日期选择器依赖内部的moment对象管理选中日期，单纯修改input值无法触发插件状态更新，导致月份下拉框与显示日期不匹配。

解决方案 #

有两种可靠方式解决该问题：

方案1：初始化插件后调用官方API设置日期 #

先完成daterangepicker初始化，再用插件提供的setStartDate方法传入解析后的moment日期对象，确保内部状态与输入框值同步：

// 初始化daterangepicker
$('.datefilter').daterangepicker({
    "singleDatePicker": true,
    "showDropdowns": true,
    "timePicker": true,
    startDate: moment().startOf('hour'),
    endDate: moment().startOf('hour').add(32, 'hour'),
    'minDate': today,
    autoUpdateInput: false,
    locale: {
        cancelLabel: 'Clear',
        format: 'YYYY-MM-DD HH:mm'
    }
});

// 调用插件API设置目标日期，同步内部状态
$('#datefilter2').daterangepicker('setStartDate', moment(datefilter2));
// 手动更新输入框显示（因autoUpdateInput设为false）
$('#datefilter2').val(datefilter2);

方案2：初始化时直接指定目标日期 #

如果已知要设置的日期，初始化插件时就将startDate和endDate（开启singleDatePicker后两者需一致）设为解析后的moment对象，一步到位：

// 将datefilter2解析为moment对象，确保格式与插件配置匹配
const targetDate = moment(datefilter2);

$('.datefilter').daterangepicker({
    "singleDatePicker": true,
    "showDropdowns": true,
    "timePicker": true,
    startDate: targetDate,
    endDate: targetDate,
    'minDate': today,
    autoUpdateInput: false,
    locale: {
        cancelLabel: 'Clear',
        format: 'YYYY-MM-DD HH:mm'
    }
});

// 手动更新输入框显示
$('#datefilter2').val(datefilter2);

关键注意点 #

• 确保datefilter2的格式与插件locale中指定的format完全一致，否则moment无法正确解析日期。
• 因设置了autoUpdateInput: false，需手动调用val()更新输入框显示文本。

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