Monthpicker, the missing jQuery widget.
View the Project on GitHub lucianocosta/jquery.mtz.monthpicker
See it: ( click on the input )
$('#default_widget').monthpicker();
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'.
<input class="monthpicker" data-start-year="2009" data-final-year="2011" data-selected-year="2010">
$('.monthpicker').monthpicker();
Options above applied:
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
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:
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 )
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.