如何改造jQueryUI默认Datepicker为月份/年份选择器？

当然可以改造！我之前也碰到过这种需求，不用额外装第三方插件，靠jQuery UI Datepicker本身的配置加一点CSS和事件监听就能搞定，给你分两种场景详细说：

一、改造为月份选择器 #

这个方案会让弹窗只显示月份和年份的下拉选择框，隐藏掉日期表格部分，完全满足只选年月的需求：

完整代码示例 #

<input type="text" id="monthPicker" placeholder="选择年月">

<script>
$(function() {
  $("#monthPicker").datepicker({
    changeMonth: true,       // 启用月份下拉
    changeYear: true,        // 启用年份下拉
    dateFormat: 'yy-mm',     // 输入框显示的格式，可改成'mm/yy'等
    showButtonPanel: true,   // 显示底部按钮栏（可选，比如"今天"按钮）
    onClose: function(dateText, inst) {
      // 选中年月后，把输入框的值设置为选中的年月
      var selectedMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
      var selectedYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      $(this).datepicker('setDate', new Date(selectedYear, selectedMonth, 1));
    },
    beforeShow: function(input, inst) {
      // 如果输入框已有值，打开弹窗时自动定位到对应的年月
      if ($(input).val()) {
        var dateParts = $(input).val().split('-');
        inst.selectedYear = parseInt(dateParts[0], 10);
        inst.selectedMonth = parseInt(dateParts[1], 10) - 1; // 月份是0基的，要减1
      }
    }
  });
});
</script>

<style>
/* 核心：隐藏日历的日期表格 */
.ui-datepicker-calendar {
  display: none;
}
/* 可选：调整弹窗宽度，适配只显示年月的布局 */
.ui-datepicker {
  width: auto;
  padding: 10px;
}
</style>

关键点说明 #

• changeMonth和changeYear是基础配置，用来启用年月的下拉选择
• CSS里的ui-datepicker-calendar { display: none; }直接把日期表格隐藏，让弹窗只留年月选择区域
• onClose事件确保用户选完年月后，输入框能正确显示选中的内容；beforeShow则是打开弹窗时自动定位到已有值对应的年月，提升使用体验
• 如果不需要底部的按钮栏，把showButtonPanel改成false就行

二、改造为年份选择器 #

如果只需要选年份，只需要在上面的基础上再隐藏月份下拉即可：

完整代码示例 #

<input type="text" id="yearPicker" placeholder="选择年份">

<script>
$(function() {
  $("#yearPicker").datepicker({
    changeYear: true,        // 只启用年份下拉
    dateFormat: 'yy',        // 输入框只显示年份
    showButtonPanel: true,
    onClose: function(dateText, inst) {
      var selectedYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      $(this).datepicker('setDate', new Date(selectedYear, 0, 1)); // 设置为该年1月1日，不影响年份显示
    },
    beforeShow: function(input, inst) {
      if ($(input).val()) {
        inst.selectedYear = parseInt($(input).val(), 10);
        inst.selectedMonth = 0; // 默认选中1月，不影响年份选择
      }
    }
  });
});
</script>

<style>
/* 隐藏月份下拉和日期表格 */
.ui-datepicker-month, .ui-datepicker-calendar {
  display: none;
}
.ui-datepicker {
  width: auto;
  padding: 10px;
}
</style>

额外小技巧 #

• 如果要限制可选年份范围，比如只允许选1990到2030年，可以在datepicker配置里加yearRange: '1990:2030'
• 要是觉得“今天”按钮没用，还可以加CSS隐藏：.ui-datepicker-buttonpane { display: none; }

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