Bootstrap Daterangepicker如何仅选择年月并保留下拉布局？

当然可以做到！Bootstrap Daterangepicker本身就支持配置成只选年月的模式，完全不用换成普通的下拉选择框，还能保留它原生的日历下拉布局。下面是具体的实现方案：

核心配置要点 #

要实现这个需求，关键要调整这几个配置项：

• showDropdowns: true：开启年份和月份的下拉选择器（这正是你要保留的下拉布局）
• locale.format：设置显示格式为MM/YYYY（只展示月份和年份）
• singleDatePicker（可选）：如果只需要选择单个年月而不是范围，就设为true；如果要保留范围选择，就保持默认false
• minYear/maxYear（可选）：限制可选的年份范围，避免用户选择过远的年份
• 自定义CSS：隐藏日历中的日期格子，只保留年月选择区域，让界面更贴合需求

完整代码示例 #

HTML部分 #

<div class="container">
  <div class="col text-center">
    <input type="text" class="form-control" name="daterange" value="01/2015 - 01/2015" />
  </div>
</div>

（注意把初始值改成年月格式的范围，和我们要显示的格式一致）

JavaScript部分 #

$(function() {
  $('input[name="daterange"]').daterangepicker({
    showDropdowns: true,
    minYear: 2010,
    maxYear: new Date().getFullYear(),
    locale: {
      format: 'MM/YYYY',
      separator: ' - ',
      applyLabel: '确定',
      cancelLabel: '取消',
      fromLabel: '开始',
      toLabel: '结束',
      monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
      daysOfWeek: ['日','一','二','三','四','五','六']
    },
    // 如果只需要单个年月，取消下面这行注释
    // singleDatePicker: true,
    startDate: '01/2015',
    endDate: '01/2015'
  }, function(start, end, label) {
    // 选中后的回调函数，可按需处理
    console.log(`选中的范围是: ${start.format('MM/YYYY')} 到 ${end.format('MM/YYYY')}`);
  });
});

自定义CSS（隐藏日期格子） #

/* 隐藏日历中的日期部分 */
.daterangepicker .calendar-table {
  display: none;
}
/* 调整日历容器高度，避免空空间 */
.daterangepicker .calendar {
  min-height: auto;
}

效果说明 #

配置后，点击输入框会弹出下拉的日历面板，面板里只显示年月的下拉选择器（没有日期格子），用户可以通过下拉选择年份和月份，选择完成后输入框会显示MM/YYYY格式的日期范围（或单个年月，取决于你是否开启singleDatePicker）。

这个方案完全保留了Daterangepicker的下拉布局，同时实现了仅选择年月的需求，不用替换成普通的select选择框。

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