MonthFormat Option

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'
});