AdminLTE日期选择器默认选中Today无数据，如何移除默认激活状态？

核心思路 #

daterangepicker默认会选中预设ranges里的第一个选项（通常是Today），要取消这个默认激活，需在初始化时不指定默认选中范围，同时禁止插件自动填充默认日期，彻底清除预设选项的默认激活状态。

具体代码实现 #

// 初始化daterangepicker的配置
$('.your-daterange-input').daterangepicker({
    ranges: {
        // 保留业务需要的预设范围
        'Today': [moment(), moment()],
        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    },
    // 关键配置：取消默认起始/结束日期，不预设任何范围
    startDate: false,
    endDate: false,
    // 禁用输入框自动填充默认日期
    autoUpdateInput: false,
    // 可选：调整选择器弹出方向，根据页面布局设置
    opens: 'right'
}, function(start, end, label) {
    // 选择范围后的回调，手动触发数据获取逻辑
    if (label) {
        // 选中预设范围（如Today）时，调用数据接口
        getTargetData(start, end);
    } else {
        // 自定义日期范围的处理逻辑
        getTargetData(start, end);
    }
});

// 强制清除残留的激活状态
$('.your-daterange-input').on('click', function() {
    $('.daterangepicker .ranges li.active').removeClass('active');
});

关键配置说明 #

• startDate: false & endDate: false：彻底取消插件默认绑定的Today日期范围，避免自动选中预设选项。
• autoUpdateInput: false：防止插件自动填充输入框的默认日期，让输入框初始为空状态。
• 回调函数手动触发数据获取：解决原问题中选中Today后无法刷新数据的问题，确保每次选择（包括预设范围）都能主动调用数据接口。
• 点击事件清除active类：如果初始化后仍有残留的激活状态，通过该监听强制移除，确保无默认选中项。

注意事项 #

• 替换代码中的.your-daterange-input为你实际使用的输入框选择器（类名/ID）。
• 确保moment.js与daterangepicker版本兼容，AdminLTE自带的版本通常无需额外调整。

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