The jQuery UI Month Picker Plugin is designed to allow user input for only a month and year when only that input is required. Clicking on the year, allows the user to jump ahead or back 5 years at a time. Clicking anywhere on the page, except on the month picker menu itself, will cause the month picker to hide. The Month Picker has lots of options for date validation, setting the start year, using an icon button, input masking, internationalization and localization and more.

-See a demo on jsFiddle at... -http://jsfiddle.net/kidsysco/JeZap/

This plugin has been tested using the following configuration.

• jQuery 1.9+
• jQuery UI 1.9+
  • jQuery UI Widget Factory required
  • .button() plugin required
  • .datepicker() plugin required
  • .position() plugin optional (highly recommended see Position option)
• (optional) Digital Bush Masked Input jQuery Plugin

Attach all required css and js files to the web page as follows...

<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" />
<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>
<script src="https://raw.github.com/digitalBush/jquery.maskedinput/1.3.1/dist/jquery.maskedinput.min.js" type="text/javascript"></script>
<script src="MonthPicker.min.js" type="text/javascript"></script>

This plugin can only be called on the text or the HTML 5 Month Input Types as follows.

$('#TextBox1').MonthPicker({ StartYear: 2020, ShowIcon: false });
$('input[type=month]').MonthPicker().css('backgroundColor', 'lightyellow');

All buttons, labels and other text can be changed out using the i18n support.

$('.selector').MonthPicker({
      i18n: {
         year: "année",
         prevYear: "l'année dernière",
         nextYear: "l'année prochaine"
      }
});

$('.selector').MonthPicker({
      IsRTL: true
});

You can create an inline month picker menu by calling the month picker function on a <div> or <span> tag, example:

$('div').MonthPicker({
	SelectedMonth: '+1y -3M', // Set the selected month.
	AltField: '#hiddenInput' // Populate a hidden field and send to send the selected value to the server.
OnAfterChooseMonth: function(selectedDate) {
	// Do something with selected JavaScript date.
    // console.log(selectedDate);
}

});


HTML 5 Month Input Support

Calling the MonthPicker on HTML 5 Month Input types is currently working. The latest version of Chrome shows some nice examples of how this plugin works with the HTML 5 Month Input Type but we still feel that our UI is better than what Chrome offers... Wow, did I just say that? The jQuery UI month picker UI allows the user to choose any month of the year in a single click, while the Chrome version requires more tinkering. The HTML 5 support in Chrome appears to make input masking and validation obsolete, so those should be turned off when using this plugin on an HTML 5 Month Input Type. The HTML 5 Month Input Type is the reccomended element to call this plugin on but it is not required.

W3C Month Input Type Documentation: http://www.w3.org/TR/html-markup/input.month.html
API Methods

 $('.selector').MonthPicker('Clear')

Clears the state of all input and validation warnings.
 $('.selector').MonthPicker('ClearAllCallbacks')

Disables all previously assigned event callbacks listed in the Events tab.
 $('.selector').MonthPicker('Disable')

Disables the MonthPicker and its associated elements.
 $('.selector').MonthPicker('Enable')

Enables the MonthPicker and its associated elements.
 $('.selector').MonthPicker('GetSelectedDate')

Returns the selected month as a Date object. (Added in version 2.4)
 $('.selector').MonthPicker('Validate')

Validates the selected month/year and returns the selected value as a Date object if it is a valid date. Returns null if there is no valid date, displays an error message if the message is specified, focuses and selects the violating text. (Added in version 2.4)
 $('.selector').MonthPicker('GetSelectedMonthYear')

Validates the selected month/year and returns the selected value as a string (for example '1/2015') if it is a valid date. Returns null if there is no valid date, displays an error message if the message is specified, focuses and selects the violating text.
NOTE: This method is not affected by the MonthFormat option.
 $('.selector').MonthPicker('GetSelectedMonth')

Returns only the month portion of the selected date as an integer. Returns NaN if there is no valid date.
 $('.selector').MonthPicker('GetSelectedYear')

Returns only the year portion of the selected date as an integer. Returns NaN if there is no valid date.
 $('.selector').val()

Use jQuery .val() to get the input without any date validation.
 $('.selector').MonthPicker('Open')

Opens the month picker menu and keeps it open if it's already open, see the OnBeforeMenuClose event to prevent the menu from closing on click (or other) events. (Added in version 2.5).
 $('.selector').MonthPicker('Toggle')

Opens the month picker menu or closes the menu if it's already open, see the OnBeforeMenuClose event to prevent the menu from closing on click (or other) events. (Added in version 2.5).
IMPORTANT: If you are Opening or Toggling the menu in response to events like click, mousedown, mouseup, focus etc...
The menu will immediately close itself, you can prevent the menu from closing using the
OnBeforeMenuClose event (example included) and calling event.preventDefault() for the element triggering the event.
NOTE: It might be possible to prevent the menu from closing by calling event.stopPropagation() in the click event that called the Open method. 
However this is not supported and might stop working in future releases if we change the way the plugin handles events.  To prevent the menu from hideing use the OnBeforeMenuClose event (example included) and call event.preventDefault() for the element triggering the event.
 $('.selector').MonthPicker('Close')

Closes the month picker if it's already open. You can prevent the menu from closing using the OnBeforeMenuClose event and calling event.preventDefault(). (Added in version 2.5).
 $('.selector').Destroy()

Destroys the month picker widget.
Theme Support

The MonthPicker plugin uses the jQuery UI CSS Framework to style its look and feel, including the colors of buttons and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
If a deeper level of customization is needed, there are widget-specific classes referenced within the MonthPicker.css stylesheet that can be modified. These classes are highlighed below.
 .month-picker-disabled

Customize the disabled look of the MonthPicker text box.

 .month-picker-invalid-message

Customize the look of validation message.

 .month-year-input

Customize the look of the MonthPicker text input box in an enabled state.

Options


    
Disabled

    Type: Boolean

    Default: false

    Disables and enables the MonthPicker.


    Set the option upon init.
    
$('.selector').MonthPicker({ Disabled: true });
Get or set the option, after init. 

//getter
var disabled = $('.selector').MonthPicker('option', 'Disabled');

//setter
$('.selector').MonthPicker('option', 'Disabled', true );



    
MinMonth

    Type: Date or Number or String

    Default: null

    Since: 2.6

    The minimum selectable month. When set to null, there is no minimum.


Multiple types supported:

	
Date: A Date object containing the minimum month.
	
Number: A number of months from today. For example 2 represents two months from today and -1 represents the last month.
	
String: A string in the format defined by the MonthFormat option, or a relative month.
 Relative months must contain value and period pairs; valid periods are "m" for months, and "y" for years. For example, "+1y +3m" represents one year and three months from today.



    Disables past months upon init.
    
$('.selector').MonthPicker({ MinMonth: 0 });
Get or set the option, after init. 

//getter
var minMonth = $('.selector').MonthPicker('option', 'MinMonth');

// Set's the minimum selectable month to one year and three months
// from today.
$('.selector').MonthPicker('option', 'MinMonth', '+1y +3m');



    
MaxMonth

    Type: Date or Number or String

    Default: null

    Since: 2.6

    The maximum selectable month. When set to null, there is no maximum.


Multiple types supported:

	
Date: A Date object containing the maximum month.
	
Number: A number of months from today. For example 2 represents two months from today and -1 represents the last month.
	
String: A string in the format defined by the MonthFormat option option, or a relative month. 
 Relative months must contain value and period pairs; valid periods are "m" for months, and "y" for years. For example, "+1y +3m" represents one year and three months from today.



    Disables future months upon init.
    
$('.selector').MonthPicker({ MaxMonth: 0 });
Get or set the option, after init. 

//getter
var minMonth = $('.selector').MonthPicker('option', 'MaxMonth');

// Set's the maximum selectable month to one year and three months
// before today.
$('.selector').MonthPicker('option', 'MaxMonth', '+1y +3m');



    
Button

    Types: 
    

    	
Function that returns jQuery
    	
HTML string
    	
jQuery selector
    	
DOM element.
	
    Since: 2.5

    Default: 
    
// Creates the default button.
Button: function(options) {
    // this refers to the associated input field.
    return $('<span id="MonthPicker_Button_' + this.id + '" class="month-picker-open-button">' + options.i18n.buttonText + '</span>')
        .button({
            text: false,
            icons: {
                // Defaults to 'ui-icon-calculator'.
                primary: options.ButtonIcon
            }
        });
}
    
    Create or assign an existing element as a button that opens the month picker menu. Set to false to hide the button and show the menu upon focus of the text box.


If you just want to use a different icon class name for the default icon see the ButtonIcon option.


    Create a button similar to the default button created by jQuery UI Datepicker's showOn: 'both' option.
$('.selector').MonthPicker({ 
    Button: '<button type="button" class="ui-datepicker-trigger">...</button>'
});

Create a button out of an image.

$('.selector').MonthPicker({ 
    Button: '<img src="images/calendar.gif" title="Select date" />'
});

Create a button with different images for enabled and disabled state.

$('.selector').MonthPicker({
    Button: function(opts) {
	    var src = 'images/calendar_' + (opts.Disabled ? 'disabled' : 'enabled') + '.gif';
	    return '<img src="' + src + '" title="Select date" />';
    }
});

Create a button using a <a href='http://handlebarsjs.com/'>Handlebars.js</a> template. The same can be done with other popular template engines.

<script id='template' type='text/template'>
<img src="images/{{ButtonIcon}}{{#if Disabled}}-disabled{{/if}}.gif" title="{{i18n.buttonText}}" />
</script>
<script>
$('.selector').MonthPicker({ 
    Button: Handlebars.compile( $('#template').html() )
});
</script>

Assign an existing element with a class of button that immediately follows
the associated input field as a button.

$('.selector').MonthPicker({ 
    Button: function() {
        return $(this).next('.button');
    }
});

Assign a specific element with the class button.

$('.selector').MonthPicker({ 
    Button: '.button'
});

Get or set the option, after init. 

//getter
var button = $('.selector').MonthPicker('option', 'Button');

//setter (hide the button and show the menu upon focus of the text box).
$('.selector').MonthPicker('option', 'Button', false );



You can create a button out of a new element that will be inserted after the associated input field or pass in an existing element that is already placed somewhere else in the DOM.


When you change the Disabled option the button will be visually disabled if it's a jQuery UI button or if it's a button tag or an input etc...).  



If the button is not one of the elements above then you have to disable the element yourself as shown in the example above.


    
SelectedMonth

    Type: Date or Number or String

    Default: null

    Since: 2.8

    Set the selected month. When set to null nothing is selected.


Multiple types supported:

	
Date: A Date object containing the selected month.
	
Number: A number of months from today. For example 2 represents two months from today and -1 represents the last month.
	
String: A string in the format defined by the MonthFormat option option, or a relative month. 
 Relative months must contain value and period pairs; valid periods are "m" for months, and "y" for years. For example, "+1y +3m" represents one year and three months from today.


Set the option upon init.

    
$('.selector').MonthPicker({ SelectedMonth: 0 });
Get or set the option, after init. 

//getter
var minMonth = $('.selector').MonthPicker('option', 'SelectedMonth');

// setter
$('.selector').MonthPicker('option', 'SelectedMonth', '+1y -3m');



    
ShowIcon

    Type: Boolean

    Default: true

    Shows an icon that opens the month picker. Without an icon, the month picker menu will show upon focus of the text box.


    Set the option upon init.
    
$('.selector').MonthPicker({ ShowIcon: true });
Get or set the option, after init. 

//getter
var disabled = $('.selector').MonthPicker('option', 'ShowIcon');

//setter
$('.selector').MonthPicker('option', 'ShowIcon', false );



    
ButtonIcon

    Type: String

    Default: ui-icon-calculator

Allows setting a different primary <a href='http://api.jqueryui.com/theming/icons/'>icon class name</a> for the default icon. Feel free to use this option in your custom buttons as show in the <a href='#button'>Button option</a> examples.



    Set the option upon init.
    
$('.selector').MonthPicker({ ButtonIcon: 'ui-icon-clock' });
Get or set the option, after init. 

//getter
var image = $('.selector').MonthPicker('option', 'ButtonIcon');

//setter
$('.selector').MonthPicker('option', 'ButtonIcon', false );



    
ShowOn

    Type: String

    Since: 2.5

    Default: button or focus only

    Set the menu to open on both clicking the button and focusing on the associated input field.


    Set the option upon init.
    
$('.selector').MonthPicker({ ShowOn: 'both' });
Get or set the option, after init. 

//getter
var ShowOn = $('.selector').MonthPicker('option', 'ShowOn');

//setter
$('.selector').MonthPicker('option', 'ShowOn', 'both' );



    
IsRTL

    Type: Boolean

    Default: false

    Since: 2.5

    Sets the menu's run direction as right to left.


IMPORTANT: This option expects that the html or body tag's dir='rtl'.


    Set the option upon init.
    
$('.selector').MonthPicker({ IsRTL: true });
Get or set the option, after init. 

//getter
var IsRTL = $('.selector').MonthPicker('option', 'IsRTL');

//setter
$('.selector').MonthPicker('option', 'IsRTL', true );



    
StartYear

    Type: Int

    Default: Current Year

    Sets the starting year in the month picker. This option will override all other start year behaviors.


    Set the option upon init.
    
$('.selector').MonthPicker({ StartYear: 2023 });
Get or set the option, after init. 

//getter
var disabled = $('.selector').MonthPicker('option', 'StartYear');

//setter
$('.selector').MonthPicker('option', 'StartYear', false );



    
ValidationErrorMessage

    Type: Nullable String

    Default: null

    Sets the validation error message for use with text input types. Set to null to omit this behavior. This option will be ignored if the HTML 5 Input Type is used.


    Set the option upon init.
    
$('.selector').MonthPicker({ ValidationErrorMessage: 'Invalid Date!' });
Get or set the option, after init. 

//getter
var disabled = $('.selector').MonthPicker('option', 'ValidationErrorMessage');

//setter
$('.selector').MonthPicker('option', 'ValidationErrorMessage', null );



    
MonthFormat

    Type: String

    Default: 'mm/yy' which results in 12/2015.

    Since: 2.4

    The format for parsed and displayed months. For a full list of the possible formats see the $.datepicker.formatDate() function.


    Set the option upon init.
<pre>// Results in December, 2015

$('.selector').MonthPicker({ MonthFormat: 'MM, yy' });
Get or set the option, after init. 

//getter
var disabled = $('.selector').MonthPicker('option', 'MonthFormat');

//setter (Results in December, 2015)
$('.selector').MonthPicker('option', 'MonthFormat', 'MM, yy' );

The following example shows how to use the popular Moment.js library
for parsing and formatting dates, but you can use any third party library you would like:
$.widget('MyOrg.MomentMonthPicker', $.KidSysco.MonthPicker, {
	
	// Set the default format.
	options: {
		MonthFormat: 'MM/YYYY',
	},
	
	// Set the format to use with the HTML 5 month input.
	MonthInputFormat: 'YYYY-MM',
	
    /**
     * @param str		{String} A string representing a date in the given format.
     * @param format	{String} The format used to parse the str argument.
     * 
     * @returns	{Date}	 A JavaScript date.
     */
    ParseMonth: function(str, format) {
        var wrapper = moment(str, format);
        return wrapper.isValid() ? wrapper.toDate() : null;
    },
    
    /**
     * @param date		{Date} A string representing a date in the given format.
     * @param format	{String} The format to use to convert the date to a string.
     * 
     * @returns	{String}  A string representing a date in the given format.
     */
    FormatMonth: function(date, format) {
        var wrapper = moment(date);
        return wrapper.isValid() ? wrapper.format(format) : null;
    }
});

And then you can use the plugin as shown:
// Creates a month picker which uses the Moment.js library to display and parse months
// which will set "December, 2015" in the input field when a month is selected.
// Of course you can also pass in any of the other supported options mentioned in
// the documentation.
$('.selector').MomentMonthPicker({
	MonthFormat: 'MMMM, YY'
});



    
AltField

    Type: Selector or jQuery or Element

    Default: null.

    Since: 2.8

    An input element that is to be updated with the selected month from the month picker. Use the AltFormat option to change the format of the date within this field. Leave as blank for no alternate field.


    Set the option upon init.
<pre>

$('.selector').MonthPicker({ AltField: '#field' });
Get or set the option, after init. 

//getter
var disabled = $('.selector').MonthPicker('option', 'AltField');

//setter
$('.selector').MonthPicker('option', 'AltField': '#OtherField' );


    
AltFormat

    Type: String

    Default: null.

    Since: 2.8

    The MonthFormat to be used for the AltField option. This allows one month format to be shown to the user for selection purposes, while a different format is actually sent behind the scenes. For a full list of the possible formats see the $.datepicker.formatDate() function.


    Set the option upon init.
<pre>

$('.selector').MonthPicker({ AltFormat: "yy-mm" });
Get or set the option, after init. 

//getter
var disabled = $('.selector').MonthPicker('option', 'AltFormat');

//setter
$('.selector').MonthPicker('option', 'AltFormat': 'yy-mm' );


    
UseInputMask

    Type: Bool

    Default: false

    Directs the MonthPicker to use the Digital Bush Masked Input jQuery Plugin on text inputs, the plugin must be loaded to the page if this option is to be used. This option will be ignored if the HTML 5 Input Type is used.


In version 2.4 and later the mask is constructed according to the MonthFormat option.


NOTE: numeric literals in the MonthFormat will be editable by the user, if this is not the desired behavior you will have to use the .mask() method manually.


    Set the option upon init.
    
$('.selector').MonthPicker({ UseInputMask: true });
Get or set the option, after init. 

//getter
var disabled = $('.selector').MonthPicker('option', 'UseInputMask');

//setter
$('.selector').MonthPicker('option', 'UseInputMask', false );



    
Animation

    Type: String

    Default: 'fadeToggle'

    Supported values: ['fadeToggle', 'slideToggle', 'none']

    Since: 2.4

    Sets the animation to use when the menu both opens and closes, you can disable animation
    by passing in none.
    

    If you want to have different animations for opening and closing the menu
    see the ShowAnim and HideAnim options.
    


    Set the option upon init.
    
$('.selector').MonthPicker({ Animation: 'slideToggle' });
Get or set the option, after init. 

//getter
var Animation = $('.selector').MonthPicker('option', 'Animation');

//setter
$('.selector').MonthPicker('option', 'Animation', 'slideToggle' );



    
Duration

    Type: Number or String

    Default: 'fadeToggle'

    Supported values: ['normal', 'fast', 'slow'] or number of milliseconds

    Since: 2.4

    Sets the speed of the animation used to open and close the menu.

F
	You choose from three predefined speeds:
	

	
normal (the default) 400ms
	
fast 200ms
	
slow 600ms
	
Or you can specify the speed in milliseconds by passing in a number.



    Set the option upon init.
    
$('.selector').MonthPicker({ Duration: 'fast' });
Get or set the option, after init. 

//getter
var Duration = $('.selector').MonthPicker('option', 'Duration');

//setter
$('.selector').MonthPicker('option', 'Duration', 'fast' );



    
ShowAnim

    Type: String

    Default: 'fadeIn'

    Supported values: ['fadeIn', 'slideDown', 'none']

    Since: 2.4

    Sets the animation to use only when the  menu is open, you can disable the show animation by
    passing in none.
    

    If you want to have the same animation for both opening and closing the menu use
    the Animation option instead.
    
<p>
To set the animation for closing the menu see the <a href='#hideanim'>HideAnim option</a>.
</p>



    Set the option upon init.
    
$('.selector').MonthPicker({ ShowAnim: 'slideDown' });
Get or set the option, after init. 

//getter
var ShowAnim = $('.selector').MonthPicker('option', 'ShowAnim');

//setter
$('.selector').MonthPicker('option', 'ShowAnim', 'slideDown' );



    
HideAnim

    Type: String

    Default: 'fadeOut'

    Supported values: ['fadeOut', 'slideUp', 'none']

    Since: 2.4

    Sets the animation to use only when the menu is opened, you can disable the hide animation by
    passing in none.
    

    If you want to have the same animation for both opening and closing the menu use
    the Animation option instead.
    
<p>
To set the animation for opening the menu see the <a href='#showanim'>ShowAnim option</a>.
</p>



    Set the option upon init.
    
$('.selector').MonthPicker({ HideAnim: 'slideUp' });
Get or set the option, after init. 

//getter
var HideAnim = $('.selector').MonthPicker('option', 'HideAnim');

//setter
$('.selector').MonthPicker('option', 'HideAnim', 'slideUp' );



    
Position

    Type: Object

	Since: 2.3

    Default: 
{ my: 'left top+1', at: 'left bottom', collision: 'flip', of: $('.selector') }


    If the jQuery UI .position() plugin is loaded
    the menu will be moved to an alternative position when it overflows the window in some direction. 

    For more information see the collision option.
    

    In addition you can specify where you would like the menu to positiond using the jQuery IU .position() plugin options.


 The properties you specify in the position hash will be merged with the default properties (shown above). 

 See example below:


    Set the option upon init.
    
// The collision property will be morged with the defualt properties so the position plugin will receive:
// { my: 'left top+1', at: 'left bottom', collision: 'fit flip', of: $('.selector') }
$('.selector').MonthPicker({
 Position: {
    collision: 'fit flip'
 }
});

Get or set the option, after init. 

//getter
var position = $('.selector').MonthPicker('option', 'Position');

//setter
$('.selector').MonthPicker('option', 'Position', {collision: 'fit', at: 'left bottom'});


Events


    
OnBeforeMenuOpen

    Type: function

    Default: null

    Since: 2.5

    This event is triggered before the Month Picker menu will open and it allows you to prevent the menu from opening. this refers to the associated input field.


    Supply a callback function to handle the event as an init option.
    
$('.selector').MonthPicker({
	OnBeforeMenuOpen: function(event){
		// Make sure the user is aware of the consequences, and prevent opening if they say no.
		if ( !confirm('The field "' + this.id + '" is destructive. Are you sure you want to proceed?') ) {
			event.preventDefault();
		}
	}
});

Get or set the callback function, after init. 

//getter
var callback = $('.selector').MonthPicker('option', 'OnBeforeMenuOpen');

//setter
$('.selector').MonthPicker('option', 'OnBeforeMenuOpen', function(){ ... } );



    
OnAfterMenuOpen

    Type: function

    Default: null

    This event is triggered after the Month Picker menu opens. As of version 2.4 this refers to the associated input field.


    Supply a callback function to handle the event as an init option.
    
$('.selector').MonthPicker({ OnAfterMenuOpen: function(){ ... } });
Get or set the callback function, after init. 

//getter
var disabled = $('.selector').MonthPicker('option', 'OnAfterMenuOpen');

//setter
$('.selector').MonthPicker('option', 'OnAfterMenuOpen', function(){ ... } );



    
OnBeforeMenuClose

    Type: function

    Default: null

    Since: 2.5

    This event is triggered before the Month Picker menu will close, and it allows you to prevent the menu from closing. this refers to the associated input field.


    Supply a callback function to handle the event as an init option.
    
$('.selector').MonthPicker({
	OnBeforeMenuClose: function(event){
		// Prevent the menu from closing when clicking on 
		// the external button or one of it's child nodes.
		//
		// Note: The first argument of $.contains() must be a DOM element, 
		// not a jQuery object or plain JavaScript object.
		if ( $.contains($('#extarnal_button')[0], event.target) ) {
			event.preventDefault();
		}
	}
});

Get or set the callback function, after init. 

//getter
var callback = $('.selector').MonthPicker('option', 'OnBeforeMenuClose');

//setter
$('.selector').MonthPicker('option', 'OnBeforeMenuClose', function(){ ... } );



    
OnAfterMenuClose

    Type: function

    Default: null

    This event is triggered after the Month Picker menu closes. As of version 2.4 this refers to the associated input field.


    Supply a callback function to handle the event as an init option.
    
$('.selector').MonthPicker({ OnAfterMenuClose: function(){ ... } });
Get or set the callback function, after init. 

//getter
var disabled = $('.selector').MonthPicker('option', 'OnAfterMenuClose');

//setter
$('.selector').MonthPicker('option', 'OnAfterNextYear', function(){ ... } );



    
OnAfterSetDisabled

    Type: function

    Default: null

    Since: 2.5

    This event is triggered after the Disabled options was changed.

    Supply a callback function to handle the event as an init option.
    
$('.selector').MonthPicker({
	OnAfterSetDisabled: function(isDisabled){
}

});

Get or set the callback function, after init. 

//getter
var callback = $('.selector').MonthPicker('option', 'OnAfterSetDisabled');

//setter
$('.selector').MonthPicker('option', 'OnAfterSetDisabled', function(){ ... } );



    
OnAfterNextYear

    Type: function

    Default: null

    This event is triggered after the Month Picker next year button has been clicked. As of version 2.4 this refers to the associated input field.


    Supply a callback function to handle the event as an init option.
    
$('.selector').MonthPicker({ OnAfterNextYear: function(){ ... } });
Get or set the callback function, after init. 

//getter
var disabled = $('.selector').MonthPicker('option', 'OnAfterNextYear');

//setter
$('.selector').MonthPicker('option', 'OnAfterNextYear', function(){ ... } );



    
OnAfterNextYears

    Type: function

    Default: null

    This event is triggered after the Month Picker next 5 years button has been clicked. As of version 2.4 this refers to the associated input field.


    Supply a callback function to handle the event as an init option.
    
$('.selector').MonthPicker({ OnAfterNextYears: function(){ ... } });
Get or set the callback function, after init. 

//getter
var disabled = $('.selector').MonthPicker('option', 'OnAfterNextYears');

//setter
$('.selector').MonthPicker('option', 'OnAfterNextYears', function(){ ... } );



    
OnAfterPreviousYear

    Type: function

    Default: null

    This event is triggered after the Month Picker previous year button has been clicked. As of version 2.4 this refers to the associated input field.


    Supply a callback function to handle the event as an init option.
    
$('.selector').MonthPicker({ OnAfterPreviousYear: function(){ ... } });
Get or set the callback function, after init. 

//getter
var disabled = $('.selector').MonthPicker('option', 'OnAfterPreviousYear');

//setter
$('.selector').MonthPicker('option', 'OnAfterPreviousYear', function(){ ... } );



    
OnAfterPreviousYears

    Type: function

    Default: null

    This event is triggered after the Month Picker previous 5 years button has been clicked. As of version 2.4 this refers to the associated input field.


    Supply a callback function to handle the event as an init option.
    
$('.selector').MonthPicker({ OnAfterPreviousYears: function(){ ... } });
Get or set the callback function, after init. 

//getter
var disabled = $('.selector').MonthPicker('option', 'OnAfterPreviousYears');

//setter
$('.selector').MonthPicker('option', 'OnAfterPreviousYears', function(){ ... } );



    
OnAfterChooseMonth

    Type: function

    Default: null

    This event is triggered after the Month Picker month button has been clicked. As of version 2.4 this refers to the associated input field.


    Supply a callback function to handle the event as an init option.
    
$('.selector').MonthPicker({ OnAfterChooseMonth: function(){ ... } });
Get or set the callback function, after init. 

//getter
var disabled = $('.selector').MonthPicker('option', 'OnAfterChooseMonth');

//setter
$('.selector').MonthPicker('option', 'OnAfterChooseMonth', function(){ ... } );



    
OnAfterChooseMonths

    Type: function

    Default: null

    This event is triggered after the Month Picker choose months button has been clicked. As of version 2.4 this refers to the associated input field.


    Supply a callback function to handle the event as an init option.
    
$('.selector').MonthPicker({ OnAfterChooseMonths: function(){ ... } });
Get or set the callback function, after init. 

//getter
var disabled = $('.selector').MonthPicker('option', 'OnAfterChooseMonths');

//setter
$('.selector').MonthPicker('option', 'OnAfterChooseMonths', function(){ ... } );



    
OnAfterChooseYear

    Type: function

    Default: null

    This event is triggered after the Month Picker choose year button has been clicked. As of version 2.4 this refers to the associated input field.


    Supply a callback function to handle the event as an init option.
    
$('.selector').MonthPicker({ OnAfterChooseYear: function(){ ... } });
Get or set the callback function, after init. 

//getter
var disabled = $('.selector').MonthPicker('option', 'OnAfterChooseYear');

//setter
$('.selector').MonthPicker('option', 'OnAfterChooseYear', function(){ ... } );



    
OnAfterChooseYears

    Type: function

    Default: null

    This event is triggered after the Month Picker choose years button has been clicked. As of version 2.4 this refers to the associated input field.


    Supply a callback function to handle the event as an init option.
    
$('.selector').MonthPicker({ OnAfterChooseYears: function(){ ... } });
Get or set the callback function, after init. 
<pre>

//getter
var disabled = $('.selector').MonthPicker('option', 'OnAfterChooseYears');
//setter
$('.selector').MonthPicker('option', 'OnAfterChooseYears', function(){ ... } );


Plugin version

The version can be determined using:
$.MonthPicker.VERSION


If the value is undefined you are using an old version (2.3 and under).

Month Picker Development Kit

This repo includes references for Node.js, NPM, Grunt and Bower to facilitate further development and testing in the jQuery UI Month Picker project.
npm install
 This command will install all required dependencies including all resources needed from Bower.
grunt
 This command will re-compile minified versions of the .js and .css codes before running both through the QUnit tests tests in a headless PhantomJS instance.
grunt test
 This command will simply re-run all QUnit tests in a headless PhantomJS instance.