jquery datePicker插件只选择月份终极解决方案

jquery的datePicker插件是一款选择日历的比较好用的插件。有的时候我们需要只能让客户选择月份，虽然设置参数dateFormat值为 'yy-mm'能达到目的，但是在显示选择的时候日期还是会显示。在网上搜了已大堆资料解决方案都是设置日期显示的表格样式类ui-datepicker-calendar设置为display:none，但是这样的话我们就只能选择年月这一种格式了，如果我们的页面中有的要显示年月日有的显示年月，这种解决方案就失效了。

于是在研究了一番之后，我对dataPicker的源代码进行了一番改写，现在我们只需要配置一下参数isMonSel为"true"就能达到我们的目的。

设置选择年月日的格式为：

$('#datePicker').datepicker({
                        dateFormat: 'yy-mm-dd',
                        buttonImageOnly: true,
                        clearText: '清除',
                        closeText: '关闭',
                        prevText: '前一月',
                        nextText: '后一月',
                        currentText: ' ',
                        monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
                        showMonthAfterYear: true,
                        yearSuffix: '年',
                        showOtherMonths: false,
                        isSelMon:'false',
                        beforeShowDay: function (date) {
//                            console.error(this.getAttribute("showVocHistory"), new Date(date).getMonth());
                            return [1, 'vocDateBg', ''];
                        }
                    });

设置只能选择年月的格式为：

$('#datePickerMon').datepicker({
                        changeMonth: true,
                        changeYear: true,
                        dateFormat: 'mm-yy',
                        showButtonPanel: true,
                        monthNamesShort: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
                        closeText: '选择',
                        currentText: '本月',
                        isSelMon:'true',
                        onClose: function (dateText, inst) {
                            var month = +$("#ui-datepicker-div .ui-datepicker-month :selected").val() + 1,
                                year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                            if (month < 10) {
                                month = '0' + month;
                            }
                            this.value = year + '-' + month;
                            if (typeof this.blur === 'function') {
                                this.blur();
                            }
                        }
                    });

被我修改后的jquery.ui.datepicker.min.js压缩代码如下，你只需要替换原来的js压缩文件即可：

(function(e,t){function n(){this._curInst=null,this._keyEvent=!1,this._disabledInputs=[],this._datepickerShowing=!1,this._inDialog=!1,this._mainDivId="ui-datepicker-div",this._inlineClass="ui-datepicker-inline",this._appendClass="ui-datepicker-append",this._triggerClass="ui-datepicker-trigger",this._dialogClass="ui-datepicker-dialog",this._disableClass="ui-datepicker-disabled",this._unselectableClass="ui-datepicker-unselectable",this._currentClass="ui-datepicker-current-day",this._dayOverClass="ui-datepicker-days-cell-over",this.regional=[],this.regional[""]={closeText:"Done",prevText:"Prev",nextText:"Next",currentText:"Today",monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],monthNamesShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],dayNames:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],dayNamesShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],dayNamesMin:["Su","Mo","Tu","We","Th","Fr","Sa"],weekHeader:"Wk",dateFormat:"mm/dd/yy",firstDay:0,isRTL:!1,showMonthAfterYear:!1,yearSuffix:""},this._defaults={showOn:"focus",showAnim:"fadeIn",showOptions:{},defaultDate:null,appendText:"",buttonText:"...",buttonImage:"",buttonImageOnly:!1,hideIfNoPrevNext:!1,navigationAsDateFormat:!1,gotoCurrent:!1,changeMonth:!1,changeYear:!1,yearRange:"c-10:c+10",showOtherMonths:!1,selectOtherMonths:!1,showWeek:!1,calculateWeek:this.iso8601Week,shortYearCutoff:"+10",minDate:null,maxDate:null,duration:"fast",beforeShowDay:null,beforeShow:null,onSelect:null,onChangeMonthYear:null,onClose:null,numberOfMonths:1,showCurrentAtPos:0,stepMonths:1,stepBigMonths:12,altField:"",altFormat:"",constrainInput:!0,showButtonPanel:!1,autoSize:!1,disabled:!1},e.extend(this._defaults,this.regional[""]),this.dpDiv=r(e("<div id='"+this._mainDivId+"' class='ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all'></div>"))}function r(t){var n="button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a";return t.delegate(n,"mouseout",function(){e(this).removeClass("ui-state-hover"),-1!==this.className.indexOf("ui-datepicker-prev")&&e(this).removeClass("ui-datepicker-prev-hover"),-1!==this.className.indexOf("ui-datepicker-next")&&e(this).removeClass("ui-datepicker-next-hover")}).delegate(n,"mouseover",function(){e.datepicker._isDisabledDatepicker(s.inline?t.parent()[0]:s.input[0])||(e(this).parents(".ui-datepicker-calendar").find("a").removeClass("ui-state-hover"),e(this).addClass("ui-state-hover"),-1!==this.className.indexOf("ui-datepicker-prev")&&e(this).addClass("ui-datepicker-prev-hover"),-1!==this.className.indexOf("ui-datepicker-next")&&e(this).addClass("ui-datepicker-next-hover"))})}function i(t,n){e.extend(t,n);for(var r in n)null==n[r]&&(t[r]=n[r]);return t}e.extend(e.ui,{datepicker:{version:"1.10.4"}});var s,o="datepicker",u=null;e.extend(n.prototype,{markerClassName:"hasDatepicker",maxRows:4,_widgetDatepicker:function(){return this.dpDiv},setDefaults:function(e){return i(this._defaults,e||{}),this},_attachDatepicker:function(t,n){var r,i,s;r=t.nodeName.toLowerCase(),i="div"===r||"span"===r,t.id||(this.uuid+=1,t.id="dp"+this.uuid),s=this._newInst(e(t),i),s.settings=e.extend({},n||{}),"input"===r?this._connectDatepicker(t,s):i&&this._inlineDatepicker(t,s)},_newInst:function(t,n){var i=t[0].id.replace(/([^A-Za-z0-9_\-])/g,"\\\\$1");return{id:i,input:t,selectedDay:0,selectedMonth:0,selectedYear:0,drawMonth:0,drawYear:0,inline:n,dpDiv:n?r(e("<div class='"+this._inlineClass+" ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all'></div>")):this.dpDiv}},_connectDatepicker:function(t,n){var r=e(t);n.append=e([]),n.trigger=e([]),r.hasClass(this.markerClassName)||(this._attachments(r,n),r.addClass(this.markerClassName).keydown(this._doKeyDown).keypress(this._doKeyPress).keyup(this._doKeyUp),this._autoSize(n),e.data(t,o,n),n.settings.disabled&&this._disableDatepicker(t))},_attachments:function(t,n){var r,i,s,o=this._get(n,"appendText"),u=this._get(n,"isRTL");n.append&&n.append.remove(),o&&(n.append=e("<span class='"+this._appendClass+"'>"+o+"</span>"),t[u?"before":"after"](n.append)),t.unbind("focus",this._showDatepicker),n.trigger&&n.trigger.remove(),r=this._get(n,"showOn"),("focus"===r||"both"===r)&&t.focus(this._showDatepicker),("button"===r||"both"===r)&&(i=this._get(n,"buttonText"),s=this._get(n,"buttonImage"),n.trigger=e(this._get(n,"buttonImageOnly")?e("<img/>").addClass(this._triggerClass).attr({src:s,alt:i,title:i}):e("<button type='button'></button>").addClass(this._triggerClass).html(s?e("<img/>").attr({src:s,alt:i,title:i}):i)),t[u?"before":"after"](n.trigger),n.trigger.click(function(){return e.datepicker._datepickerShowing&&e.datepicker._lastInput===t[0]?e.datepicker._hideDatepicker():e.datepicker._datepickerShowing&&e.datepicker._lastInput!==t[0]?(e.datepicker._hideDatepicker(),e.datepicker._showDatepicker(t[0])):e.datepicker._showDatepicker(t[0]),!1}))},_autoSize:function(e){if(this._get(e,"autoSize")&&!e.inline){var t,n,r,i,s=new Date(2009,11,20),o=this._get(e,"dateF