如何让jQuery DateRangePicker输入框始终显示固定提示文本？

要让关联的输入框始终显示“请选择您的日期...”，你需要禁用插件自动更新输入框的默认行为，手动维护输入框的固定内容。具体实现如下：

修改后的完整代码 #

function addDays(date, days) {
    var result = new Date(date);
    result.setDate(result.getDate() + days);
    return result;
}

let departureDate, returnDate;            
$(function () {
    // 初始化输入框为固定提示文本
    $("#daterangepicker").val("请选择您的日期...");
    
    $("#daterangepicker").daterangepicker(
      {
        opens: "top",
        minDate: addDays(new Date(), 7),
        locale: {
         format: 'DD-MM-YYYY'
        },
        autoUpdateInput: false // 禁用插件自动填充输入框
      },
      function (start, end, label) {
        departureDate = start.format("DD-MM-YYYY");
        returnDate = end.format("DD-MM-YYYY");

        // 仅更新需要存储日期的输入框，不改动主输入框
        document.getElementById("Departure-date").value = departureDate;
        document.getElementById("Return-date").value = returnDate;
        
        // 确保主输入框始终显示固定文本
        $("#daterangepicker").val("请选择您的日期...");
      }
    );
    
    // 可选：防止用户手动修改输入框内容，强制恢复固定文本
    $("#daterangepicker").on("input", function() {
        $(this).val("请选择您的日期...");
    });
});

关键改动说明 #

• autoUpdateInput: false：这是核心配置，阻止DateRangePicker在用户选择日期后自动将日期范围写入输入框。
• 初始化固定文本：页面加载时直接给#daterangepicker设置目标文本，保证初始状态显示正确。
• 回调中维持文本：在日期选择完成的回调里，重新设置输入框为固定文本，避免插件或其他操作意外修改内容。
• 输入事件监听（可选）：如果担心用户手动编辑输入框，添加这个监听可以强制恢复固定文本，确保显示一致性。

如果你的触发元素不是输入框（比如用按钮唤起选择器），可以直接把触发元素改成按钮，设置按钮文本为“请选择您的日期...”，这样实现更简单，上述代码适用于输入框作为触发元素的场景。

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