如何在jQuery daterangepicker中禁用当前日期并显示占位符

云上老周

2026-5-1

解决daterangepicker的两个需求：禁用当前日期 + 设置占位符

嘿，我来帮你搞定这两个需求，咱们直接调整你的现有代码就行，分两步来：

1. 禁用当前日期

你现在的disabledDates函数没有返回值，daterangepicker的isInvalidDate需要一个明确的返回值——返回true就表示该日期要被禁用。我们可以借助moment的isSame方法判断当前日期是否是今天，然后返回true来禁用它：

var disabledDates = function(date) {
  // 判断传入日期是否和今天是同一天，是则返回true禁用
  return date.isSame(moment(), 'day');
}

2. 设置输入框占位符

daterangepicker本身提供了placeholder配置项，直接在初始化配置里加上这个参数，就能替换默认的日期格式文本：

placeholder: '请选择入住-退房日期' // 这里可以改成你想要的任意占位符文本

修改后的完整代码

把上面的修改整合到你的代码里，最终版本如下：

(function($) { 
  "use strict"; 
  /*Document is Ready */ 
  $(document).ready(function() { 
    // ============================================= 
    // DATEPICKER 
    // ============================================= 
    var disabledDates = function(date) {
      // 禁用当前日期
      return date.isSame(moment(), 'day');
    } 

    $('.datepicker').daterangepicker({
      locale: {
        format: 'DD-MM-YYYY',
      },
      isInvalidDate: disabledDates,
      // 添加占位符配置，替换默认日期文本
      placeholder: '请选择入住-退房日期'
    }, function(label) {}); 

    $(".calendar.left .daterangepicker_input").before("<div class='calendar-title'> Check Inn </div>"); 
    $(".calendar.right .daterangepicker_input").before("<div class='calendar-title'>Check Out</div>"); 
  }); 
})(jQuery);