jQuery Plugin For jQuery UI Month/Year Picker - mtz.monthpicker

mtz.monthpicker is a jQuery plugin to extend the jQuery UI datepicker widget that allows the used to choose only a month and year from an interactive calendar UI.

See also:

• jQuery Mobile Plugin For Multiple Month Picker
• jQuery and jQuery UI Month & Year Selector Plugin
• Pick Month And Year With jQuery UI - jQuery monthpicker.js

How to use it:

1. Include the necessary jQuery & jQuery UI on your webpage.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

2. Make sure to include the jQuery mtz.monthpicker plugin after jQuery library.

<script src="jquery.mtz.monthpicker.js"></script>

3. Call the plugin on your existing text field to display a month/year picker on blur.

$('input').monthpicker();

4. Customization options.

// month/year format
pattern: 'mm/yyyy',

selectedMonth: null,
selectedMonthName: '',
selectedYear: year,
startYear: year - 10,
finalYear: year + 10,

// localization
monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],

id: "monthpicker_" + (Math.random() * Math.random()).toString().replace('.', ''),

// display the month/year picker when focused
openOnFocus: true,

// an array of disabled months
disabledMonths: []

5. Events.

$('#events_widget').monthpicker();

$('#events_widget').monthpicker().bind('monthpicker-click-month', function (e, month) {
    alert('You clicked on month ' + month);

}).bind('monthpicker-change-year', function (e, year) {
    alert('You chosed the year ' + year);

}).bind('monthpicker-show', function () {
    alert('showing...');

}).bind('monthpicker-hide', function () {
    alert('hiding...');
});

---

This awesome jQuery plugin is developed by lucianocosta. For more Advanced Usages, please check the demo page or visit the official website.