' + - '' + + '' + ''; + // Groups state and functionallity to fade in the jump years hint + // when the user mouses over the Year 2016 text. + // NOTE: An invocation of this function: + // 1: Is an independent instance with it's own unique state. + // 2: Assumes that there is no previous hint applied to the + // button (it dosen't remove the existing hint). + function _applyButtonHint(_button, _hintText) { + var _speed = 125, _currentLabel, _startTimeout, _labelElem = $(); + + _button.on('mouseenter' + _eventsNs + 'h', _prepareToStart); + + // Setp 1: Wait to make sure the user isn't just mousing over and + // away from the button. + // NOTE: If _fadeOutHint() is triggered on mouseleave before the + // timeout is triggered the animation is canceled. + function _prepareToStart() { + _startTimeout = setTimeout(_fadeOutLabel, 175); + } + + // Setp 2: Fade out the label (Year 2016) text to 45%. + function _fadeOutLabel() { + _startTimeout = null; + _labelElem = $('span', _button).animate({ opacity: 0.45 }, _speed, _fadeInHint); + } + + // Setp 3: Fade in the hint text (Jump years). + function _fadeInHint() { + _currentLabel = _labelElem.text(); + _labelElem.animate({ opacity: 1 }, _speed).text(_hintText); + } + + _button.on('mouseleave' + _eventsNs + 'h', _fadeOutHint); + + function _fadeOutHint() { + if (_startTimeout) { + // If the user is just moving over and away from the button, cancel + // the animation completely. + clearTimeout(_startTimeout); + } else { + // Setp 4: Fade out the hint text (Jump years) to 45%. + _labelElem = $('span', _button).animate({ opacity: 0.45 }, _speed, _fadeInLabel); + } + } + + // Setp 5: Fade in the label (Year 2016) text. + function _fadeInLabel() { + _labelElem.text( _currentLabel ).animate({opacity: 1}, _speed); + } + + // Adds a function to the button elemene which is called when the + // user clicks the button (the hint needs to be removed). + _button.data(_clearHint, function() { + clearTimeout(_startTimeout); + _labelElem.stop().css({ opacity: 1 }); + _button.off(_eventsNs + 'h'); + }); + } // End _applyButtonHint() + + function _setDisabled(_button, _value) { + var _btnWidget = _button.data('ui-button'); + if (_btnWidget.option('disabled') !== _value) { + _btnWidget.option('disabled', _value); + } + } + $.widget("KidSysco.MonthPicker", { /******* Properties *******/ @@ -218,16 +283,14 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt. }, _monthPickerButton: $(), - _validationMessage: $(), - _selectedBtn: $(), /******* jQuery UI Widget Factory Overrides ********/ _destroy: function () { var _elem = this.element; - if (jQuery.mask && this.options.UseInputMask) { + if ($.mask && this.options.UseInputMask) { _elem.unmask(); if (!this.GetSelectedDate()) { @@ -235,7 +298,7 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt. } } - _elem.removeClass('month-year-input').off(_eventsNs); + _elem.removeClass(_textfieldClass).off(_eventsNs); $(document).off(_eventsNs + this.uuid); @@ -247,6 +310,10 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt. } this._validationMessage.remove(); + + if (_openedInstance === this) { + _openedInstance = null; + } }, _setOption: function (key, value) { @@ -260,6 +327,7 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt. alert(_posErr); return; } + break; case 'MonthFormat': var date = this.GetSelectedDate(); if (date) { @@ -269,7 +337,7 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt. } // Make sure the user passed in a valid Animation, ShowAnim and HideAnim options values. - if (key in _animVals && _animVals[key].indexOf(value) === -1) { + if (key in _animVals && $.inArray(value, _animVals[key]) === -1) { alert(_badOptValErr.replace(/%/, key) + _animVals[key]); return; } @@ -324,31 +392,31 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt. _el.css('width', 'auto'); } - _el.addClass('month-year-input'); - - var _menu = this._monthPickerMenu = $(''); + var _menu = this._monthPickerMenu = $('').hide(); var isInline = _isInline(_el); $(_markup).appendTo(_menu); - (_menu).appendTo( isInline ? _el : document.body ); - - $('.year-title', _menu).text(this._i18n('year')); + _menu.appendTo( isInline ? _el : document.body ); - this._yearContainerAll = - $('.year-container-all', _menu) - .attr('title', this._i18n('jumpYears')) - .click($proxy(this._showYearsClickHandler, this)); + this._titleButton = + $('.month-picker-title', _menu) + .click($proxy(this._showYearsClickHandler, this)) + .find('a').jqueryUIButton() + .removeClass(_defaultClass); + this._applyJumpYearsHint(); this._createValidationMessage(); - this._yearContainer = $('.year', _menu); + this._prevButton = $('.month-picker-previous>a', _menu) + .jqueryUIButton({ text: false }) + .removeClass(_defaultClass); - this._prevButton = $('.previous-year button', _menu).jqueryUIButton({ text: false }); - this._nextButton = $('.next-year button', _menu).jqueryUIButton({ text: false }); + this._nextButton = $('.month-picker-next>a', _menu) + .jqueryUIButton({ text: false }) + .removeClass(_defaultClass); this._setRTL(_opts.IsRTL); //Assigns icons to the next/prev buttons. - var _iconClass = '.ui-button-icon-primary'; $(_iconClass, this._nextButton).text(this._i18n('nextLabel')); $(_iconClass, this._prevButton).text(this._i18n('prevLabel')); @@ -387,7 +455,6 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt. this._setUseInputMask(); this._setDisabledState(); - this._updateFieldEvents(); this.Destroy = this.destroy; if (isInline) { @@ -395,6 +462,7 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt. } else { // Update the alt field if the user manually changes // the input field. + _el.addClass(_textfieldClass); _el.change($proxy(this._updateAlt, this)); } }, @@ -518,6 +586,13 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt. return; } + // If the menu is closed while in jump years mode, bring back + // the jump years hint. + if (this._backToYear) { + this._applyJumpYearsHint(); + this._backToYear = 0; + } + this._visible = false; _openedInstance = null; $(document).off('keydown' + _eventsNs + this.uuid) @@ -573,6 +648,10 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt. this._showMonths(); }, + _applyJumpYearsHint: function() { + _applyButtonHint(this._titleButton, this._i18n('jumpYears')); + }, + _i18n: function(str) { return this.options.i18n[str] || $.MonthPicker.i18n[str]; }, @@ -614,7 +693,8 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt. var _btnOpt = _opts.ShowIcon ? _opts.Button : false; if ($.isFunction(_btnOpt)) { - _btnOpt = _btnOpt.call(_elem[0], $.extend(true, {i18n: $.MonthPicker.i18n}, this.options)); + var _params = $.extend(true, {i18n: $.extend(true, {}, $.MonthPicker.i18n)}, this.options); + _btnOpt = _btnOpt.call(_elem[0], _params); } var _removeOldBtn = false; @@ -657,8 +737,8 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt. }, _setRTL: function(value) { - _applyArrowButton(this._prevButton, !value); - _applyArrowButton(this._nextButton, value); + _applyArrowButton( this._prevButton.css('float', value ? 'right' : 'left'), !value ); + _applyArrowButton( this._nextButton.css('float', value ? 'left' : 'right'), value ); }, _keyDown: function (event) { @@ -737,11 +817,12 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt. }, _getPickerYear: function () { - return parseInt(this._yearContainer.text(), 10); + return this._pickerYear; }, _setPickerYear: function (year) { - this._yearContainer.text(year || new Date().getFullYear()); + this._pickerYear = year || new Date().getFullYear(); + this._titleButton.jqueryUIButton({ label: this._i18n('year') + ' ' + this._pickerYear }); }, _updateAlt: function (noop, date) { @@ -753,7 +834,8 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt. }, _chooseMonth: function (month) { - var date = new Date(this._getPickerYear(), month-1); + var _year = this._getPickerYear(); + var date = new Date(_year, month-1); this.element.val(this._formatMonth( date )).blur(); this._updateAlt(0, date); @@ -764,6 +846,7 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt. }, _chooseYear: function (year) { + this._backToYear = 0; this._setPickerYear(year); this._buttons.removeClass(_todayClass); this._showMonths(); @@ -784,8 +867,6 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt. .off(click) .on(click, $proxy(this._addToYear, this, 1)); - this._yearContainerAll.css('cursor', 'pointer'); - this._buttons.off(_eventsNs); var me = this, _onMonthClick = $proxy(me._onMonthClick, me); @@ -800,16 +881,27 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt. _showYearsClickHandler: function () { this._buttons.removeClass(_todayClass); - this._showYears(); + if (!this._backToYear) { + this._backToYear = this._getPickerYear(); + this._showYears(); - _event('OnAfterChooseYears', this)(); + var _label = this._i18n('backTo') + ' ' + this._getPickerYear(); + this._titleButton.jqueryUIButton({ label: _label }).data( _clearHint )(); + + _event('OnAfterChooseYears', this)(); + } else { + this._setPickerYear(this._backToYear); + this._applyJumpYearsHint(); + this._showMonths(); + this._backToYear = 0; + } }, _showYears: function () { var _currYear = this._getPickerYear(), _yearDifferential = -4, _firstYear = (_currYear + _yearDifferential), - AMOUNT_TO_ADD = 5, + AMOUNT_TO_ADD = 12, _thisYear = new Date().getFullYear(); var _minDate = this._MinMonth; @@ -817,18 +909,18 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt. var _minYear = _minDate ? _toYear(_minDate) : 0; var _maxYear = _maxDate ? _toYear(_maxDate) : 0; this._prevButton - .attr('title', this._i18n('prev5Years')) + .attr('title', this._i18n('prev12Years')) .off(click) - .on(click, $proxy(this._addToYears, this, -AMOUNT_TO_ADD)) - .jqueryUIButton('option', 'disabled', _minYear && (_firstYear - 1) < _minYear); + .on(click, $proxy(this._addToYears, this, -AMOUNT_TO_ADD)); this._nextButton - .attr('title', this._i18n('next5Years')) + .attr('title', this._i18n('next12Years')) .off(click) - .on(click, $proxy(this._addToYears, this, AMOUNT_TO_ADD)) - .jqueryUIButton('option', 'disabled', _maxYear && (_firstYear + 12) -1 > _maxYear); + .on(click, $proxy(this._addToYears, this, AMOUNT_TO_ADD)); + + _setDisabled(this._prevButton, _minYear && (_firstYear - 1) < _minYear); + _setDisabled(this._nextButton, _maxYear && (_firstYear + 12) -1 > _maxYear); - this._yearContainerAll.css('cursor', 'default'); this._buttons.off(_eventsNs); _setActive( this._selectedBtn, false ); @@ -846,7 +938,7 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt. label: _year }) .toggleClass(_todayClass, _year === _thisYear && _todayWithinBounds) // Heighlight the current year. - .on(click, { year: _year }, _onClick ) + .on(click, { year: _year }, _onClick ); // Heighlight the selected year. if (_selWithinBounds && _selYear && _selYear === _year) { @@ -867,18 +959,15 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt. }, _addToYear: function(amount) { - var _year = this._yearContainer; - _year.text(parseInt(_year.text()) + amount, 10); + this._setPickerYear( this._getPickerYear() + amount ); this.element.focus(); - this._decorateButtons(); _event('OnAfter' + (amount > 0 ? 'Next' : 'Previous') + 'Year', this)(); }, _addToYears: function(amount) { - var _year = this._yearContainer; - _year.text(parseInt(_year.text()) + amount, 10); + this._pickerYear = this._getPickerYear() + amount; this._showYears(); this.element.focus(); @@ -911,8 +1000,8 @@ http://www.gnu.org/licenses/old-licenses/lgpl-2.1.txt. } // Disable the next/prev button if we've reached the min/max year. - this._prevButton.jqueryUIButton('option', 'disabled', _minDate && _curYear == _toYear(_minDate)); - this._nextButton.jqueryUIButton('option', 'disabled', _maxDate && _curYear == _toYear(_maxDate)); + _setDisabled(this._prevButton, _minDate && _curYear == _toYear(_minDate)); + _setDisabled(this._nextButton, _maxDate && _curYear == _toYear(_maxDate)); for (var i = 0; i < 12; i++) { // Disable the button if the month is not between the diff --git a/MonthPicker.min.js b/MonthPicker.min.js index fd2c45d..ccacd03 100644 --- a/MonthPicker.min.js +++ b/MonthPicker.min.js @@ -1 +1 @@ -!function(a,b,c,d){"use strict";function e(a){return a.getMonth()+12*a.getFullYear()}function f(a){return Math.floor(a/12)}function g(){a(this).addClass(t)}function h(a,b){return a[b?"on":"off"]("mousenter mouseout",g).toggleClass(t,b)}function i(a,b,c){return(!b||a>=b)&&(!c||c>=a)}function j(b,c){if(null===c)return c;if(c instanceof d)return e(c);if(a.isNumeric(c))return e(new d)+parseInt(c,10);var f=b._parseMonth(c);return f?e(f):l(c)}function k(a,b){return F(b.options[a]||E,b.element[0])}function l(b,c){var f=a.trim(b);f=f.replace(/y/i,'":"y"'),f=f.replace(/m/i,'":"m"');try{var g=JSON.parse('{"'+f.replace(/ /g,',"')+"}"),h={};for(var i in g)h[g[i]]=i;var j=e(new d);return j+=parseInt(h.m,10)||0,j+12*(parseInt(h.y,10)||0)}catch(k){return!1}}function m(b){return a(''+b.i18n.buttonText+"").jqueryUIButton({text:!1,icons:{primary:b.ButtonIcon}})}function n(a,b){a.jqueryUIButton("option",{icons:{primary:"ui-icon-circle-triangle-"+(b?"w":"e")}})}function o(a){return!a.is("input")}if(!(a&&a.ui&&a.ui.button&&a.ui.datepicker))return void alert(w+"The jQuery UI button and datepicker plug-ins must be loaded.");a.widget.bridge("jqueryUIButton",a.ui.button);var p=a.fx.speeds,q=".MonthPicker",r="month-picker-disabled",s="ui-state-highlight",t="ui-state-active",u={my:"left top+1",at:"left bottom"},v={my:"right top+1",at:"right bottom"},w="MonthPicker Error: ",x=w+"The jQuery UI position plug-in must be loaded.",y=w+"Unsupported % option value, supported values are: ",z=w+'"_" is not a valid %Month value.',A=null,B=!!a.ui.position,C={Animation:["slideToggle","fadeToggle","none"],ShowAnim:["fadeIn","slideDown","none"],HideAnim:["fadeOut","slideUp","none"]},D={ValidationErrorMessage:"_createValidationMessage",Disabled:"_setDisabledState",ShowIcon:"_updateButton",Button:"_updateButton",ShowOn:"_updateFieldEvents",IsRTL:"_setRTL",AltFormat:"_updateAlt",AltField:"_updateAlt",StartYear:"_setPickerYear",MinMonth:"_setMinMonth",MaxMonth:"_setMaxMonth",SelectedMonth:"_setSelectedMonth"},E=a.noop,F=a.proxy,G=a.datepicker,H="click"+q;a.MonthPicker={VERSION:"2.8.2",i18n:{year:"Year",prevYear:"Previous Year",nextYear:"Next Year",next5Years:"Jump Forward 5 Years",prev5Years:"Jump Back 5 Years",nextLabel:"Next",prevLabel:"Prev",buttonText:"Open Month Chooser",jumpYears:"Jump Years",months:["Jan.","Feb.","Mar.","Apr.","May","June","July","Aug.","Sep.","Oct.","Nov.","Dec."]}};var I='

';a.widget("KidSysco.MonthPicker",{options:{i18n:{},IsRTL:!1,Position:null,StartYear:null,ShowIcon:!0,UseInputMask:!1,ValidationErrorMessage:null,Disabled:!1,MonthFormat:"mm/yy",Animation:"fadeToggle",ShowAnim:null,HideAnim:null,ShowOn:null,MinMonth:null,MaxMonth:null,Duration:"normal",Button:m,ButtonIcon:"ui-icon-calculator"},_monthPickerButton:a(),_validationMessage:a(),_selectedBtn:a(),_destroy:function(){var b=this.element;jQuery.mask&&this.options.UseInputMask&&(b.unmask(),this.GetSelectedDate()||b.val("")),b.removeClass("month-year-input").off(q),a(c).off(q+this.uuid),this._monthPickerMenu.remove();var d=this._monthPickerButton.off(H);this._removeOldBtn&&d.remove(),this._validationMessage.remove()},_setOption:function(b,c){switch(b){case"i18n":c=a.extend({},c);break;case"Position":if(!B)return void alert(x);case"MonthFormat":var d=this.GetSelectedDate();d&&this.element.val(this.FormatMonth(d,c))}return b in C&&-1===C[b].indexOf(c)?void alert(y.replace(/%/,b)+C[b]):(this._super(b,c),void(D[b]?this[D[b]](c):0))},_create:function(){var b=this.element,e=this.options;if(!b.is("input,div,span")||-1===a.inArray(b.attr("type"),["text","month",void 0])){var g=w+"MonthPicker can only be called on text or month inputs.";return alert(g+" \n\nSee (developer tools) for more details."),console.error(g+"\n Caused by:"),console.log(b[0]),!1}if(!a.mask&&e.UseInputMask)return alert(w+"The UseInputMask option requires the Input Mask Plugin. Get it from digitalbush.com"),!1;if(null!==e.Position&&!B)return alert(x),!1;for(var h in C)if(null!==e[h]&&-1===a.inArray(e[h],C[h]))return alert(y.replace(/%/,h)+C[h]),!1;this._isMonthInputType="month"===b.attr("type"),this._isMonthInputType&&(this.options.MonthFormat=this.MonthInputFormat,b.css("width","auto")),b.addClass("month-year-input");var i=this._monthPickerMenu=a(''),k=o(b);a(I).appendTo(i),i.appendTo(k?b:c.body),a(".year-title",i).text(this._i18n("year")),this._yearContainerAll=a(".year-container-all",i).attr("title",this._i18n("jumpYears")).click(F(this._showYearsClickHandler,this)),this._createValidationMessage(),this._yearContainer=a(".year",i),this._prevButton=a(".previous-year button",i).jqueryUIButton({text:!1}),this._nextButton=a(".next-year button",i).jqueryUIButton({text:!1}),this._setRTL(e.IsRTL);var l=".ui-button-icon-primary";a(l,this._nextButton).text(this._i18n("nextLabel")),a(l,this._prevButton).text(this._i18n("prevLabel"));for(var m=a(".month-picker-month-table",i),n=0;12>n;n++){var p=n%3?p:a("").appendTo(m);p.append('')}this._buttons=a("button",m).jqueryUIButton(),i.on(H,function(a){return!1});var q=this,r="Month";a.each(["Min","Max"],function(a,b){q["_set"+b+r]=function(a){(q["_"+b+r]=j(q,a))===!1&&alert(z.replace(/%/,b).replace(/_/,a))},q._setOption(b+r,q.options[b+r])});var s=e.SelectedMonth;if(void 0!==s){var t=j(this,s);b.val(this._formatMonth(new d(f(t),t%12,1)))}this._updateAlt(),this._setUseInputMask(),this._setDisabledState(),this._updateFieldEvents(),this.Destroy=this.destroy,k?this.Open():b.change(F(this._updateAlt,this))},GetSelectedDate:function(){return this._parseMonth()},GetSelectedYear:function(){var a=this.GetSelectedDate();return a?a.getFullYear():NaN},GetSelectedMonth:function(){var a=this.GetSelectedDate();return a?a.getMonth()+1:NaN},Validate:function(){var a=this.GetSelectedDate();return null===this.options.ValidationErrorMessage||this.options.Disabled||this._validationMessage.toggle(!a),a},GetSelectedMonthYear:function(){var a=this.Validate();return a?a.getMonth()+1+"/"+a.getFullYear():null},Disable:function(){this._setOption("Disabled",!0)},Enable:function(){this._setOption("Disabled",!1)},ClearAllCallbacks:function(){for(var a in this.options)0===a.indexOf("On")&&(this.options[a]=E)},Clear:function(){this.element.val(""),this._validationMessage.hide()},Toggle:function(a){return this._visible?this.Close(a):this.Open(a)},Open:function(b){var d=this.element,e=this.options;if(!e.Disabled&&!this._visible){if(b=b||a.Event(),k("OnBeforeMenuOpen",this)(b)===!1||b.isDefaultPrevented())return!1;this._visible=!0,this._ajustYear(e);var f=this._monthPickerMenu;if(this._showMonths(),o(d))f.css("position","static").show(),k("OnAfterMenuOpen",this)();else{A&&A.Close(b),A=this,a(c).on(H+this.uuid,F(this.Close,this)).on("keydown"+q+this.uuid,F(this._keyDown,this)),d.off("blur"+q).focus();var g=e.ShowAnim||e.Animation,h="none"===g;f[h?"fadeIn":g]({duration:h?0:this._duration(),start:F(this._position,this,f),complete:k("OnAfterMenuOpen",this)})}}return!1},Close:function(b){var d=this.element;if(!o(d)&&this._visible){var e=this._monthPickerMenu,f=this.options;if(b=b||a.Event(),k("OnBeforeMenuClose",this)(b)===!1||b.isDefaultPrevented())return;this._visible=!1,A=null,a(c).off("keydown"+q+this.uuid).off(H+this.uuid),this.Validate(),d.on("blur"+q,F(this.Validate,this));var g=k("OnAfterMenuClose",this),h=f.HideAnim||f.Animation;"none"===h?e.hide(0,g):e[h](this._duration(),g)}},MonthInputFormat:"yy-mm",ParseMonth:function(a,b){try{return G.parseDate("dd"+b,"01"+a)}catch(c){return null}},FormatMonth:function(a,b){try{return G.formatDate(b,a)||null}catch(c){return null}},_setSelectedMonth:function(a){var b=j(this,a),c=this.element;b?c.val(this._formatMonth(new d(f(b),b%12,1))):c.val(""),this._ajustYear(this.options),this._showMonths()},_i18n:function(b){return this.options.i18n[b]||a.MonthPicker.i18n[b]},_parseMonth:function(a,b){return this.ParseMonth(a||this.element.val(),b||this.options.MonthFormat)},_formatMonth:function(a,b){return this.FormatMonth(a||this._parseMonth(),b||this.options.MonthFormat)},_updateButton:function(){var a=this.options.Disabled;this._createButton();var b=this._monthPickerButton;try{b.jqueryUIButton("option","disabled",a)}catch(c){b.filter("button,input").prop("disabled",a)}this._updateFieldEvents()},_createButton:function(){var b=this.element,d=this.options;if(!o(b)){var e=this._monthPickerButton.off(q),f=d.ShowIcon?d.Button:!1;a.isFunction(f)&&(f=f.call(b[0],a.extend(!0,{i18n:a.MonthPicker.i18n},this.options)));var g=!1;this._monthPickerButton=(f instanceof a?f:a(f)).each(function(){a.contains(c.body,this)||(g=!0,a(this).insertAfter(b))}).on(H,F(this.Toggle,this)),this._removeOldBtn&&e.remove(),this._removeOldBtn=g}},_updateFieldEvents:function(){var a=H+" focus"+q;this.element.off(a),"both"!==this.options.ShowOn&&this._monthPickerButton.length||this.element.on(a,F(this.Open,this))},_createValidationMessage:function(){var b=this.options.ValidationErrorMessage,c=this.element;if(-1===a.inArray(b,[null,""])){var d=a(''+b+""),e=this._monthPickerButton;this._validationMessage=d.insertAfter(e.length?e:c),c.on("blur"+q,F(this.Validate,this))}else this._validationMessage.remove()},_setRTL:function(a){n(this._prevButton,!a),n(this._nextButton,a)},_keyDown:function(a){switch(a.keyCode){case 13:this.element.val()||this._chooseMonth((new d).getMonth()+1),this.Close(a);break;case 27:case 9:this.Close(a)}},_duration:function(){var b=this.options.Duration;return a.isNumeric(b)?b:b in p?p[b]:p._default},_position:B?function(b){var c=this.options.IsRTL?v:u,d=a.extend(c,this.options.Position);return b.position(a.extend({of:this.element},d))}:function(a){var b=this.element,c={top:b.offset().top+b.height()+7+"px"};return this.options.IsRTL?c.left=b.offset().left-a.width()+b.width()+7+"px":c.left=b.offset().left+"px",a.css(c)},_setUseInputMask:function(){if(!this._isMonthInputType)try{this.options.UseInputMask?this.element.mask(this._formatMonth(new d).replace(/\d/g,9)):this.element.unmask()}catch(a){}},_setDisabledState:function(){var a=this.options.Disabled,b=this.element;b[0].disabled=a,b.toggleClass(r,a),a&&this._validationMessage.hide(),this.Close(),this._updateButton(),k("OnAfterSetDisabled",this)(a)},_getPickerYear:function(){return parseInt(this._yearContainer.text(),10)},_setPickerYear:function(a){this._yearContainer.text(a||(new d).getFullYear())},_updateAlt:function(b,c){var d=a(this.options.AltField);d.length&&d.val(this._formatMonth(c,this.options.AltFormat))},_chooseMonth:function(b){var c=new d(this._getPickerYear(),b-1);this.element.val(this._formatMonth(c)).blur(),this._updateAlt(0,c),h(this._selectedBtn,!1),this._selectedBtn=h(a(this._buttons[b-1]),!0),k("OnAfterChooseMonth",this)(c)},_chooseYear:function(a){this._setPickerYear(a),this._buttons.removeClass(s),this._showMonths(),k("OnAfterChooseYear",this)()},_showMonths:function(){var b=this._i18n("months");this._prevButton.attr("title",this._i18n("prevYear")).off(H).on(H,F(this._addToYear,this,-1)),this._nextButton.attr("title",this._i18n("nextYear")).off(H).on(H,F(this._addToYear,this,1)),this._yearContainerAll.css("cursor","pointer"),this._buttons.off(q);var c=this,d=F(c._onMonthClick,c);a.each(b,function(b,e){a(c._buttons[b]).on(H,{month:b+1},d).jqueryUIButton("option","label",e)}),this._decorateButtons()},_showYearsClickHandler:function(){this._buttons.removeClass(s),this._showYears(),k("OnAfterChooseYears",this)()},_showYears:function(){var b=this._getPickerYear(),c=-4,e=b+c,g=5,j=(new d).getFullYear(),k=this._MinMonth,l=this._MaxMonth,m=k?f(k):0,n=l?f(l):0;this._prevButton.attr("title",this._i18n("prev5Years")).off(H).on(H,F(this._addToYears,this,-g)).jqueryUIButton("option","disabled",m&&m>e-1),this._nextButton.attr("title",this._i18n("next5Years")).off(H).on(H,F(this._addToYears,this,g)).jqueryUIButton("option","disabled",n&&e+12-1>n),this._yearContainerAll.css("cursor","default"),this._buttons.off(q),h(this._selectedBtn,!1);for(var o=this.GetSelectedYear(),p=F(this._onYearClick,this),r=i(j,m,n),t=i(o,m,n),u=0;12>u;u++){var v=b+c,w=a(this._buttons[u]).jqueryUIButton({disabled:!i(v,m,n),label:v}).toggleClass(s,v===j&&r).on(H,{year:v},p);t&&o&&o===v&&(this._selectedBtn=h(w,!0)),c++}},_onMonthClick:function(a){this._chooseMonth(a.data.month),this.Close(a)},_onYearClick:function(a){this._chooseYear(a.data.year)},_addToYear:function(a){var b=this._yearContainer;b.text(parseInt(b.text())+a,10),this.element.focus(),this._decorateButtons(),k("OnAfter"+(a>0?"Next":"Previous")+"Year",this)()},_addToYears:function(a){var b=this._yearContainer;b.text(parseInt(b.text())+a,10),this._showYears(),this.element.focus(),k("OnAfter"+(a>0?"Next":"Previous")+"Years",this)()},_ajustYear:function(a){var b=a.StartYear||this.GetSelectedYear()||(new d).getFullYear();null!==this._MinMonth&&(b=Math.max(f(this._MinMonth),b)),null!==this._MaxMonth&&(b=Math.min(f(this._MaxMonth),b)),this._setPickerYear(b)},_decorateButtons:function(){var b=this._getPickerYear(),c=e(new d),g=this._MinMonth,j=this._MaxMonth;h(this._selectedBtn,!1);var k=this.GetSelectedDate(),l=i(k?e(k):null,g,j);k&&k.getFullYear()===b&&(this._selectedBtn=h(a(this._buttons[k.getMonth()]),l)),this._prevButton.jqueryUIButton("option","disabled",g&&b==f(g)),this._nextButton.jqueryUIButton("option","disabled",j&&b==f(j));for(var m=0;12>m;m++){var n=12*b+m,o=i(n,g,j);a(this._buttons[m]).jqueryUIButton({disabled:!o}).toggleClass(s,o&&n==c)}}})}(jQuery,window,document,Date); \ No newline at end of file +!function(a,b,c,d){"use strict";function e(a){return a.getMonth()+12*a.getFullYear()}function f(a){return Math.floor(a/12)}function g(){a(this).addClass(z)}function h(a,b){return a[b?"on":"off"]("mousenter mouseout",g).toggleClass(z,b)}function i(a,b,c){return(!b||a>=b)&&(!c||c>=a)}function j(b,c){if(null===c)return c;if(c instanceof d)return e(c);if(a.isNumeric(c))return e(new d)+parseInt(c,10);var f=b._parseMonth(c);return f?e(f):l(c)}function k(a,b){return L(b.options[a]||K,b.element[0])}function l(b,c){var f=a.trim(b);f=f.replace(/y/i,'":"y"'),f=f.replace(/m/i,'":"m"');try{var g=JSON.parse('{"'+f.replace(/ /g,',"')+"}"),h={};for(var i in g)h[g[i]]=i;var j=e(new d);return j+=parseInt(h.m,10)||0,j+12*(parseInt(h.y,10)||0)}catch(k){return!1}}function m(b){return a(''+b.i18n.buttonText+"").jqueryUIButton({text:!1,icons:{primary:b.ButtonIcon}})}function n(a,b){a.jqueryUIButton("option",{icons:{primary:"ui-icon-circle-triangle-"+(b?"w":"e")}})}function o(a){return!a.is("input")}function p(b,c){function d(){j=setTimeout(e,175)}function e(){j=null,l=a("span",b).animate({opacity:.45},k,f)}function f(){i=l.text(),l.animate({opacity:1},k).text(c)}function g(){j?clearTimeout(j):l=a("span",b).animate({opacity:.45},k,h)}function h(){l.text(i).animate({opacity:1},k)}var i,j,k=125,l=a();b.on("mouseenter"+t+"h",d),b.on("mouseleave"+t+"h",g),b.data(v,function(){clearTimeout(j),l.stop().css({opacity:1}),b.off(t+"h")})}function q(a,b){var c=a.data("ui-button");c.option("disabled")!==b&&c.option("disabled",b)}var r="MonthPicker Error: ";if(!(a&&a.ui&&a.ui.button&&a.ui.datepicker))return void alert(r+"The jQuery UI button and datepicker plug-ins must be loaded.");a.widget.bridge("jqueryUIButton",a.ui.button);var s=a.fx.speeds,t=".MonthPicker",u="month-year-input",v="month-picker-clear-hint",w=".ui-button-icon-primary",x="month-picker-disabled",y="ui-state-highlight",z="ui-state-active",A="ui-state-default",B={my:"left top+1",at:"left bottom"},C={my:"right top+1",at:"right bottom"},D=r+"The jQuery UI position plug-in must be loaded.",E=r+"Unsupported % option value, supported values are: ",F=r+'"_" is not a valid %Month value.',G=null,H=!!a.ui.position,I={Animation:["slideToggle","fadeToggle","none"],ShowAnim:["fadeIn","slideDown","none"],HideAnim:["fadeOut","slideUp","none"]},J={ValidationErrorMessage:"_createValidationMessage",Disabled:"_setDisabledState",ShowIcon:"_updateButton",Button:"_updateButton",ShowOn:"_updateFieldEvents",IsRTL:"_setRTL",AltFormat:"_updateAlt",AltField:"_updateAlt",StartYear:"_setPickerYear",MinMonth:"_setMinMonth",MaxMonth:"_setMaxMonth",SelectedMonth:"_setSelectedMonth"},K=a.noop,L=a.proxy,M=a.datepicker,N="click"+t;a.MonthPicker={VERSION:"3.0-beta1",i18n:{year:"Year",prevYear:"Previous Year",nextYear:"Next Year",next12Years:"Jump Forward 12 Years",prev12Years:"Jump Back 12 Years",nextLabel:"Next",prevLabel:"Prev",buttonText:"Open Month Chooser",jumpYears:"Jump Years",backTo:"Back to",months:["Jan.","Feb.","Mar.","Apr.","May","June","July","Aug.","Sep.","Oct.","Nov.","Dec."]}};var O='

 <link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" media="all" rel="stylesheet" type="text/css" />
-<link href="css/MonthPicker.css" media="all" rel="stylesheet" type="text/css" />
+<link href="css/MonthPicker.min.css" media="all" rel="stylesheet" type="text/css" />
 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
 <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript"></script>
diff --git a/UPGRADE.md b/UPGRADE.md
new file mode 100644
index 0000000..04959a4
--- /dev/null
+++ b/UPGRADE.md
@@ -0,0 +1,67 @@
+# 3.x Upgrade Guide
+
+Version 3.x features a redesigned Month Picker menu which:
+
+1. Looks more consistent with [jQuery UI Datepicker](https://jqueryui.com/datepicker/).
+2. Turns the Year title into a button which gives the user a "hint" about
+the Jump Years menu when they mouse over it.
+3. Allows the user to return to the year they clicked Jump years at.
+
+See it for yourself at the [demo on JSFiddle](http://jsfiddle.net/kidsysco/JeZap/).
+
+##  i18n property name changes
+If you changed out the buttons, labels or other text using the
+i18n support you should rename and translate `next5Years` to `next12Years`
+and `prev5Years` to `prev12Years`.
+
+You should also add the `backTo` property, which is used for the
+new *Back to 2016* button when the user enters the Jump Year menu.
+
+##  CSS changes
+Version 3.x uses `em` instead of `px` units.
+This means that the menu determines it's size according to the
+`body` element's `font-size`, instead of having a fixed width of `200px`.
+
+If you need to resize the menu, add this rule to your CSS:
+```
+/* Makes the Month Picker menu 20% bigger. */
+.month-picker {
+  font-size: 1.2em;
+}
+```
+
+Version 3.x removes:
+```
+.month-year-input {
+    width: 60px;
+}
+```
+
+If you still want the plugin to implicitly resize the input fields it's applied to you must add this rule to your own CSS.
+
+If you explicitly defined a rule that reverts the effects of this rule, it's no longer necessary and it can be deleted.
+
+##  Markup changes
+If you've applied custom CSS to the Month Picker menu, please note that:
+
+The following elements were removed:
+```
+