jQuery.mtz.monthpicker

Monthpicker, the missing jQuery widget.

View the Project on GitHub lucianocosta/jquery.mtz.monthpicker

Monthpicker is a jQuery calendar widget that allows you to pick just month and year.

See it: ( click on the input )

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

Configuration

By default, the year range starts 10 years ago and ends on 10 years from now, having the current year selected.

This and other settings can be overwritten on widget initialization:

options = {
    pattern: 'yyyy-mm', // Default is 'mm/yyyy' and separator char is not mandatory
    selectedYear: 2010,
    startYear: 2008,
    finalYear: 2012,
    monthNames: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
};

$('#custom_widget').monthpicker(options);

Options above applied:

It's also ok to use a pattern of 2 digits for year and/or 1 for month. To use month name instead of its number, use 'mmm'.

NEW ! You can override initial settings by setting some data-attributes on your inputs:
  • data-start-year
  • data-final-year
  • data-selected-year


<input class="monthpicker" data-start-year="2009" data-final-year="2011" data-selected-year="2010">

$('.monthpicker').monthpicker();

Options above applied:


Methods

Programmatic interation through these methods:

$('#my_widget').monthpicker('show');
$('#my_widget').monthpicker('hide');
$('#my_widget').monthpicker('destroy');
$('#my_widget').monthpicker('disableMonths', [1, 2, 11, 12]);
$('#my_widget').monthpicker('disableMonths', []); // re-enables all months

Events

These are the events triggered by the widget:

Listen to them using jQuery's  bind()  method:

$('#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...');
});

// chainability is also ok

Events above applied:


All toghether

Mixing events and methods you can, for instance, disable some months only for the year(s) you want.

var options = {
    selectedYear: 2009,
    startYear: 2008,
    finalYear: 2010,
    openOnFocus: false // Let's now use a button to show the widget
};

$('#last_widget').monthpicker(options);

$('#last_widget').monthpicker().bind('monthpicker-change-year', function (e, year) {
    $('#last_widget').monthpicker('disableMonths', []); // (re)enables all
    if (year === '2008') {
        $('#last_widget').monthpicker('disableMonths', [1, 2, 3, 4]);
    }
    if (year === '2010') {
        $('#last_widget').monthpicker('disableMonths', [9, 10, 11, 12]);
    }
});

$('#last_widget_button').bind('click', function () {
    $('#last_widget').monthpicker('show');
});

See it: ( click the button )


Final notes

Monthpicker makes use of the same CSS classes as other jQueryUI widgets do. Thus, if you have a custom theme for jQueryUI, it should looks properly themed too.

Even if you create many Monthpicker widgets using CSS class selector, there will be one (and only one) instance for each input matching your selector, so you can still manipulate them isolatedly. ( In previous versions, only one instance of Monthpicker widget was created, with all inputs sharing its behavior )

If you have any issue, please report it on GitHub issues section.

If you don't know what GitHub is all about, get Monthpicker from this link.


Project Goals