[实战之jQuery] flatpickr的年份输入(number input)无痛转换成下拉(select)

话说在使用falcon admin template时，里面有搭配到flatpickr v4做为日期/时间的选取器

虽然相较jQuery的datetimepicker或datepicker比较不好使用
但在外观上的确比较好一些，因此就加了一些共用函式来操作flatpickr

    function setFlatpickrOption(_this, option, value) {       $(_this).get(0)._flatpickr.set(option, value);   }   function getFlatpickrDates(_this) {       return $(_this).get(0)._flatpickr.selectedDates;       //return _.map($(_this).get(0)._flatpickr.selectedDates, (date) => date != '' ? new Date(date).toISOString() : '');   }   function setFlatpickrDates(_this, dateVal, withTime = false) {       if ( dateVal == null && $(_this).get(0)._flatpickr ) {           clearFlatpickrDates(_this);           return;       }       dateVal = moment(withTime ? _layout.formatDateTime(dateVal) : _layout.formatDate(dateVal)).valueOf();       if (moment(dateVal).isValid())           $(_this).get(0)._flatpickr.setDate(dateVal);   }   function clearFlatpickrDates(_this) {       // $(_this).get(0)._flatpickr.clear();       $(_this).get(0)._flatpickr.destroy();       flatpickr(_this, $(_this).data('options'));   }   function setFlatpickrYear(_this, year) {       let _d = new Date(year, $(_this).get(0)._flatpickr.currentMonth, 1);       // console.log($(_this).get(0)._flatpickr);       $(_this).get(0)._flatpickr.jumpToDate(_d, false);   }

保持使用jQuery的selector做为识别参数

setFlatpickrDates(`{selector}`, {dateValue});

这样初步就可以使用起来了
但凡事总有一个BUT
因为在flatpickr的日期选择是number input+内建会产生年份加减的按钮
但不够直接及明显，比如不晓得的人要设定出生年就要按超多下
或者还要点入input自行输入
考量到这类的使用者大多习惯下拉切换年份(如同datepicker)
因此就加了以下hack

    .flatpickr-current-month .flatpickr-yearDropdown-years {       appearance: menulist;       background: transparent;       border: none;       border-radius: 0;       box-sizing: border-box;       color: inherit;       cursor: pointer;       font-size: inherit;       font-family: inherit;       font-weight: 300;       height: auto;       line-height: inherit;       margin: -1px 0 0 0;       outline: none;       padding: 0 0 0 0.5ch;       position: relative;       vertical-align: initial;       -webkit-box-sizing: border-box;       -webkit-appearance: menulist;       -moz-appearance: menulist;       width: auto;   }

    $('.datetimepickerV1').each(function() {       let id = $(this).attr('id');       let dateOption = Object.assign({           onMonthChange: function(selectedDates, dateStr, instance) {               $(instance.calendarContainer).find('.flatpickr-yearDropdown-years').val(instance.currentYear);           },           onOpen: function(selectedDates, dateStr, instance){               let minYear = 1900, maxYear = new Date().getFullYear();               let years = Array.apply(null, Array(maxYear - minYear + 1))                   .map(function (y, i) { return minYear + i; });               let currentYear = selectedDates.length > 0 ? selectedDates[0].getFullYear() : instance.currentYear;               $(instance.calendarContainer).find('.numInputWrapper').replaceWith(`                   <div class="numInputWrapper">                       <select class="flatpickr-yearDropdown-years pe-1" onchange="setFlatpickrYear('#${id}', $(this).val());">                           ${years.map(x => `<option ${x == currentYear ? 'selected' : ''}>${x}</option>`)}                       </select>                       <input class="numInput cur-year d-none" type="number" tabindex="-1" aria-label="Year">                   </div>               `);           }       }, $(this).data('options') || {});       flatpickr($(this).get(0), dateOption);   });

除了里面的minYear, maxYear可以各自依需求调整之外
其它部份就可以如下跑动了：