如何为多个jQuery UI datepicker中指定ID的组件单独设置仅显示年月

问题原因 #

你之前写的CSS规则不生效，是因为jQuery UI Datepicker的弹窗层是全局共用的独立DOM元素，不会绑定触发弹窗的input的ID属性，所以#from_month_date_full.ui-datepicker-calendar这个选择器无法匹配到对应元素，自然不生效。

解决方案 #

分两步修改即可实现仅这两个日期组件只显示年月选择：

1. 给目标datepicker加自定义标识类 #

在#from_month_date_full和#to_month_date_full的datepicker配置中新增beforeShow回调，触发弹窗时给当前弹窗加专属的自定义类：

$(function() {
  $( "#fromDate, #toDate" ).datepicker({
    dateFormat: "yy-mm-dd"
  });
  $('#from_month_date_full, #to_month_date_full').datepicker({
      showMonthAfterYear:true,
      monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
      altField: '#from_month_date',
      altFormat: 'yy-mm-dd',
      changeMonth: true,
      changeYear: true,
      dateFormat: 'yy-mm-dd', // 如果需要输入框仅显示年月，可改为 'yy-mm'
      showAnim: 'slideDown',
      yearRange: '-10:+0',
      // 新增：弹窗显示前加自定义类
      beforeShow: function(input, inst) {
        inst.dpDiv.addClass('only-year-month-picker');
      },
      onChangeMonthYear:function(y, m, i){
          var d = i.selectedDay;
          $(this).datepicker('setDate', new Date(y, m-1, 1));
          $('#to_month_date_full').datepicker('setDate', new Date(y, m, 0))
      }
  });
});

额外注意：你当前引入jQuery UI样式的标签用错了，CSS文件应该用<link>标签引入而不是<script>标签，否则样式无法正常加载：

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

2. 新增对应CSS规则隐藏日期选择面板 #

/* 仅对加了自定义类的datepicker隐藏日期选择表格 */
.only-year-month-picker .ui-datepicker-calendar {
    display: none;
}

可选优化 #

如果需要输入框内仅展示年月不展示具体日期，直接把对应datepicker配置中的dateFormat参数值改为'yy-mm'即可，altField的完整日期存储逻辑不受影响。

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