JqueryUI datepicker以面板的形式显示年份

考虑到JqueryUI的datepicker要表示年份以下拉框的形式，而且还没有任何css样式，实在有点low。所以稍作调整，以面板的形式表示，再给点样式，提示美感。
结合之前Vue做成的日期组件 传送门 在methods里追加如下代码：

setDayColor(isShow) {
     let pickYear = $(".ui-datepicker-year");//获取datepicker的年份显示object
     if (pickYear.text().length === 4) {//日语年份转换，不转换的可以忽略。
         pickYear.text($.japanYear.getJapYear(pickYear.text()));
     }
     pickYear.on("click", function () {//添加点击事件
         $.japanYear.show(_that.elId, $(this).text());
     });
}

代码中的 $.japanYear 为之前写的手绘年组件 传送门
然后再把之前的日期组件的dateShow方法稍微修正一下。

dateShow() {
       let _that = this;
       $("#" + this.elId).datepicker({
           dateFormat: 'yy-mm-dd',
           minDate: '1926-12-25',
           showOn: "click",
           beforeShowDay: function (date) {
               if (date.getDay() === 0 || date.getDay() === 6) {
                   return [false, '', ''];
               } else {
                   return [true];
               }
           },
           beforeShow: function () {//datepicker 事件，当面板表示之前
               setTimeout(function () {
                   _that.setDayColor(true);
               }, 0);
           },
           onChangeMonthYear: function () {//datepicker 事件,当改变年份和月份
               setTimeout(function () {
                   _that.setDayColor(false);
               }, 0);
           },
           onSelect: function (dateText) {
              _that.setDataValue(val);
           }
       }).datepicker("show");
       $(this.$el).unbind("keypress", $.datepicker._doKeyPress);
       $(this.$el).unbind("keydown", $.datepicker._doKeyDown);
       $(this.$el).unbind("doKeyUp", $.datepicker._doKeyUp);
   },

接下来就是最后一步，把之前的手绘年组件在稍微修正一下。

//增加一个参数yearOnly，区分是单独表示年还是和datepicker组合
japanYear.show= function (elId,year,yearOnly){
     if(!elId){
         return;
     }
     if(year===null||year===undefined||year.trim()===""){
         year =new Date().getFullYear();
     }else if(year.length===3){
         year =japanYear.getNormalYear(year);
     }
     if(yearOnly){
          if ($('#calendar_year').length === 0) {
              $('body').append(template);
          }
         $("#calendar_year table div").click(function (){
             $("#"+japanYear.elId).val($(this).text())
             document.getElementById(japanYear.elId).dispatchEvent(new Event('change'));
             $("#calendar_year").css("display","none");
             $('#calendar_year').remove();
         });
         let browserHeight = document.documentElement.clientHeight;
         let scrollY = document.documentElement.scrollTop || document.body.scrollTop;
         let divHeight =$("#calendar_year").outerHeight();
         let posLeft =$("#"+elId).offset().left;
         let posTop = $("#"+elId).offset().top+$("#"+elId).outerHeight();
         let toTop =$("#"+elId).offset().top-scrollY;
         if(browserHeight-toTop-$("#"+elId).outerHeight()<divHeight){
             posTop=$("#"+elId).offset().top-divHeight;
         }
         japanYear.elId=elId;
         getYears(year,-5);
         $("#calendar_year").css({"display":"block","left":posLeft + "px","top":posTop+"px"});
     }else{
         if ($('#calendar_year').length === 0) {
             $('#ui-datepicker-div').append(template);
         }
         $("#calendar_year table div").click(function (){
             let date = new Date();
             let year =$(this).text();
             let yearEl = $("#" + japanYear.elId);
             let selected = yearEl.val() || japanYear.japanDate(date);
             if (!year || ~selected.indexOf(year)) {
                 $('#calendar_year').remove();
                 return;
             }
             if(selected.length===7){
                 date.setFullYear(parseInt(japanYear.getNormalYear(year)));
                 date.setMonth(parseInt(selected.substring(3,5))-1);
                 date.setDate(parseInt(selected.substr(5)));
             }
             //刷新datepicker
             yearEl.datepicker('setDate', date).datepicker('refresh');
             setTimeout(function () {
                 $("#"+japanYear.elId).val(japanYear.japanDate(date));
             },0);
             let month=date.getMonth()+1;
             if(month<10){
                 month ="0"+month;
             }
             let day =date.getDate();
             if(day<10){
                 day ="0"+day;
             }
             yearEl.val($(this).text()+month+day);
             $('#calendar_year').remove();
         });
         japanYear.elId=elId;
         getYears(year,-5);
         $("#calendar_year").css({"display":"block","left": "0px","top":"0px"});
     }
     
     $(window).on("resize", function () {
         $.japanYear.close();
     });
     $(".main-body-height").on("scroll", function () {
         $.japanYear.close();
     });

 }

上述修改完成之前，功能就实现了。 不足之处，忘大家不吝指正。