如何禁用Daterangepicker组件的默认日期值？

你遇到的问题是因为Daterangepicker默认会自动将当前日期填充到输入框，即使设置了defaultDate: null也无法阻止这个行为。需要添加autoUpdateInput: false配置项来禁用自动填充，同时在日期选择回调中手动更新输入框内容。

修改后的完整代码如下：

HTML 部分 #

<input type="text" id="dates" class="form-control filter-field" placeholder="Enter dates" aria-label="Dates">

JavaScript 部分 #

var dates = [];

$(document).ready(function(){
    // 按日期筛选
    $('#dates').daterangepicker({
        defaultDate: null,
        opens: 'left',
        locale: {
            format: 'YYYY-MM-DD'
        },
        autoUpdateInput: false // 禁用初始化时的自动日期填充
    }, function(start, end, label) {
        dates = [start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD')];
        // 手动将选中的日期范围填入输入框
        $('#dates').val(`${start.format('YYYY-MM-DD')} - ${end.format('YYYY-MM-DD')}`);
        filterProperty();
    });

    // 处理取消选择的情况，清空输入框和日期数组
    $('#dates').on('cancel.daterangepicker', function(ev, picker) {
        $(this).val('');
        dates = [];
        filterProperty();
    });
})

关键配置说明：

• autoUpdateInput: false：阻止组件在初始化时自动将当前日期写入输入框，保持输入框初始显示占位符
• 日期选择回调中手动更新输入框：确保只有用户主动选择日期范围后，输入框才会显示对应的日期
• 取消事件监听：处理用户打开选择器后未选日期直接关闭的场景，清空输入框和筛选参数

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