如何在JavaScript DateRangePicker中实现月份隔离显示？

我在项目中集成DateRangePicker时，希望每个日历面板只显示当前选中月份的日期（目标效果：日历内仅展示当月有效日期，无跨月的灰色占位日期），但默认状态下日历会包含前后月份的跨月日期（默认效果：日历中显示上月末尾和下月开头的灰色日期）。查阅DateRangePicker官方文档后，未找到直接对应的配置项。

以下是我的相关代码：

DateRangePicker初始化代码（CoffeeScript） #

$("#reportrange").daterangepicker
      ranges:
         "Last Week": [moment().subtract("days", moment().day() + 1).subtract("days", 6), moment().subtract("days", moment().day() + 1)]
         "Week to Date": [moment().subtract("days", moment().day()), moment()]
         "Last Month": [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
      startDate: moment().subtract("days", moment().day() + 1).subtract("days", 6)
      endDate: moment().subtract("days", moment().day() + 1),
      alwaysShowCalendars: true
   , (start, end, label) ->
         $("#reportrange span").html start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY")
         $("[name*='_start_date']").val(start.format("ddd, D MMM YYYY"))
         $("[name*='_end_date']").val(end.format("ddd, D MMM YYYY")).trigger 'change'

Ruby模板前端代码 #

.grid-24.box
   .grid-12
      %h3 Select Date Range
      #reportrange
         %i.glyph-calendar.icon-large
         %span= "#{(DateTime.now - (DateTime.now.wday + 1) - 6).strftime("%B %d, %Y")} - #{(DateTime.now - (DateTime.now.wday + 1)).strftime("%B %d, %Y")} "
         %b.caret
      =hidden_field_tag "charge_start_date", DateTime.now.prev_month.strftime("%a,  %d %b %Y")
      =hidden_field_tag "charge_end_date", DateTime.now.strftime("%a,  %d %b %Y")
.grid-24#display-charges
   =render :partial => "user_charge_data_display", :locals => {users: @users, start_range: (DateTime.now - 30), end_range: DateTime.now}

解决方案 #

由于官方未提供直接配置项，可通过以下两种方式实现需求：

方法1：CSS样式隐藏跨月日期 #

DateRangePicker的跨月日期默认带有.off类，直接通过CSS隐藏即可：

.daterangepicker .off {
    display: none !important;
}

若需更精准控制（比如保留当月禁用日期，仅隐藏跨月日期），可调整为：

.daterangepicker td.off:not(.in-range) {
    display: none;
}

方法2：JavaScript动态处理 #

在DateRangePicker的显示或更新事件中，隐藏跨月日期元素：

// 日历弹出时隐藏跨月日期
$('#reportrange').on('show.daterangepicker', function(ev, picker) {
    picker.calendarContainer.find('.off').hide();
});

// 日历切换月份时重新隐藏
$('#reportrange').on('update.daterangepicker', function(ev, picker) {
    picker.calendarContainer.find('.off').hide();
});

转换为CoffeeScript版本：

$("#reportrange").on "show.daterangepicker", (ev, picker) ->
  picker.calendarContainer.find(".off").hide()

$("#reportrange").on "update.daterangepicker", (ev, picker) ->
  picker.calendarContainer.find(".off").hide()

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