如何用jQuery/JavaScript实现仅显示选中年月的日期选择器

下面提供两种可直接运行的实现方案，基于最常用的jQuery UI Datepicker插件：

方案一：外部年月选择器联动日期选择器 #

适合需要单独控制年月选择的场景，通过下拉框选择年月后，日期选择器仅展示对应月份的日期：

HTML结构 #

<!-- 年份选择下拉框 -->
<select id="year-select"></select>
<!-- 月份选择下拉框 -->
<select id="month-select">
  <option value="0">1月</option>
  <option value="1">2月</option>
  <option value="2">3月</option>
  <option value="3">4月</option>
  <option value="4">5月</option>
  <option value="5">6月</option>
  <option value="6">7月</option>
  <option value="7">8月</option>
  <option value="8">9月</option>
  <option value="9">10月</option>
  <option value="10">11月</option>
  <option value="11">12月</option>
</select>
<!-- 日期选择器输入框 -->
<input type="text" id="datepicker" placeholder="选择日期">

JavaScript代码 #

// 初始化年份选择框（生成当前前后5年的选项）
const currentYear = new Date().getFullYear();
const yearSelect = $('#year-select');
for (let i = currentYear - 5; i <= currentYear + 5; i++) {
  yearSelect.append(`<option value="${i}">${i}年</option>`);
}

// 初始化日期选择器
$('#datepicker').datepicker({
  dateFormat: 'yy-mm-dd', // 设置日期显示格式
  changeMonth: false, // 关闭自带的月份切换
  changeYear: false, // 关闭自带的年份切换
  showButtonPanel: false
});

// 更新日期选择器的可选范围
function updateDateRange() {
  const selectedYear = parseInt($('#year-select').val());
  const selectedMonth = parseInt($('#month-select').val());
  
  // 计算当月第一天
  const minDate = new Date(selectedYear, selectedMonth, 1);
  // 计算当月最后一天（下月第一天减1天）
  const maxDate = new Date(selectedYear, selectedMonth + 1, 0);
  
  // 给日期选择器设置范围
  $('#datepicker').datepicker('option', {
    minDate: minDate,
    maxDate: maxDate
  });
  
  // 可选：自动选中当月第一天
  $('#datepicker').datepicker('setDate', minDate);
}

// 监听年月选择变化，实时更新范围
$('#year-select, #month-select').on('change', updateDateRange);
// 页面加载完成后初始化默认范围
updateDateRange();

方案二：利用Datepicker自带的年月切换功能 #

如果想用插件自带的年月下拉框切换，直接在切换事件中限制日期范围：

HTML结构 #

<input type="text" id="datepicker" placeholder="选择日期">

JavaScript代码 #

$('#datepicker').datepicker({
  dateFormat: 'yy-mm-dd',
  changeMonth: true, // 开启自带的月份切换
  changeYear: true, // 开启自带的年份切换
  // 切换年月时触发的事件
  onChangeMonthYear: function(year, month, inst) {
    // 注意：datepicker的month参数是1-based（1代表1月），JS Date是0-based，需要转换
    const adjustedMonth = month - 1;
    const minDate = new Date(year, adjustedMonth, 1);
    const maxDate = new Date(year, adjustedMonth + 1, 0);
    
    // 更新可选日期范围
    $(this).datepicker('option', {
      minDate: minDate,
      maxDate: maxDate
    });
    
    // 可选：切换后自动选中当月第一天
    $(this).datepicker('setDate', minDate);
  },
  // 初始化日期选择器时设置默认范围
  beforeShow: function(input, inst) {
    const currentDate = $(this).datepicker('getDate') || new Date();
    const year = currentDate.getFullYear();
    const month = currentDate.getMonth();
    const minDate = new Date(year, month, 1);
    const maxDate = new Date(year, month + 1, 0);
    
    $(this).datepicker('option', {
      minDate: minDate,
      maxDate: maxDate
    });
  }
});

关键注意事项 #

• 计算当月最后一天时，new Date(year, month+1, 0)是实用技巧：JS Date会自动处理月份溢出，比如传入3月（索引2）+1=4月（索引3），日期0就代表4月的前一天，也就是3月的最后一天。
• jQuery UI Datepicker的onChangeMonthYear事件中，month参数是1-based的，必须转成0-based才能和JS Date兼容。

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