It would be quite nice to be able to display it inline, the way jQuery's datepicker does : http://jqueryui.com/datepicker/#inline

line 118 of jquery.mtz.monthpicker.js should be "nowrap" instead of "no-wrap".

With the hyphen it works in firefox/chrome, but will not work in IE7/8, throwing this error:
"Could not get the whiteSpace property. Invalid argument." :(

Such, a minuscule thing, but it did cause issues.

More info: http://www.w3schools.com/cssref/pr_text_white-space.asp

Chrome Canary says:

Refused to execute script from 'https://raw.github.com/lucianocosta/jquery.mtz.monthpicker/master/jquery.mtz.monthpicker.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. lucianocosta.info/:1

Trying to do the following, but it isn't working:

var today = new Date();

var options = {
    monthNames: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun',
                 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
    finalYear: today.getFullYear()
};

$('input#data_inicio').monthpicker(options);
$('input#data_fim').monthpicker(options);

I'm still seeing default month names, and the years go through the "10 years limit" thing.
Any idea on what's happening?

Using jquery 1.9.0

init of monthpicker checks to see if data has been set, but if the plugin has already been initialized it does not extend the element's data-start-year, data-final-year and data-selected-year attributes if they have changed.

Recommend cloning the element on re-init to get the updated attributes (since the first init causes jquery default .data() to lose its values) and reloading select.mtz-monthpicker-year.

If the element associated with the monthpicker is initially hidden, the widget will be displayed at top: 0 and left: 0

If the show method recalculates the position, the item is displayed in the proper coordinates.

I made this change and got the expected result:

    show: function (n) {
        var widget = $('#' + this.data('monthpicker').settings.id);
        var monthpicker = $('#' + this.data('monthpicker').target.attr("id") + ':eq(0)');
        widget.css("top", monthpicker.offset().top  + monthpicker.outerHeight());
        widget.css("left", monthpicker.offset().left);
        widget.show();
        widget.find('select').focus();
        this.trigger('monthpicker-show');
    },

I've found that after destroying a monthpicker, there are some artifacts left behind. Namely there is the monthpicker-widgetcontainer class and the focus event.

The current destroy method contains:

$(this).removeData('monthpicker');

this should at the very least be changed to

$(this).removeClass('mtz-monthpicker-widgetcontainer')
         .unbind('focus')
         .removeData('monthpicker');

The main problem is that clicking on the leftover text box will give a javascript error as the event still attempts to fire.

Hi.

Upgraded jQuery to 2.1.1. Now, there is no formatting - it is transparent. Check out the screenshot:

Currently there seems to be no CSS effect to show the selected month on the monthpicker.

Currently, the DateFormat is pretty much baked inside the plugin, with no standard compliance with Localisation and JQuery UI Datepicker.

The way I see it, this plugin should be compatible with JQuery UI Datepicker options and Localisation support (through the i18n plugins)

Which would mean:

• Short Month Names and Long Month names inside the plugin.
• Standard DateFormat support (which would mean the day could be included)
• Year Suffix

(And probably some other things, I am not an expert with Localisation...)

I do not think MonthPicker should depends on the JQuery UI Datepicker plugin, but it'd be nice if their options would be compatible.

Ideally, I would be able to do something like this:

 var options = {
       pattern: $(".datepicker").datepicker("option", "dateFormat");,
       monthNames: $(".datepicker").datepicker("option", "monthNames");
       monthNamesShort: $(".datepicker").datepicker("option", "monthNamesShort");
 };

I realize this might be outside the scope of this plugin, I would appreciate if you could share your vision of this plugin, and if this is the sort of things you'd like to see integrated to it.

If present it should ovewrite initial settings for its widget.

Hi,

When using this plugin with jquery 1.6, I got the error of 'Uncaught TypeError: undefined is not a function ' in line 87 in chrome:

                if (settings.openOnFocus === true) {
                    $this.on('focus', function () {
                        $this.monthpicker('show');
                    });
                }

Can somebody provide the fix please?

Thanks very much,
Qiuzhuang

Hi, I have a problem with monthpicker, I would like to disabled some months but when i'm using $('#my_widget').monthpicker('disableMonths', [1, 2, 11, 12]); it does not work, all months are enabled. This is my code:

var today = new Date(),
currentMonth = today.getMonth()+1,
months = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];

$('#date_input').monthpicker({
    pattern: 'yyyy-mm',
    selectedYear:today.getFullYear(),
    startYear:1999,
    finalYear:today.getFullYear(),
    monthNames:months
});   

$('#date_input').monthpicker('disableMonths', months.slice(currentMonth));

What i'm doing wrong?

Hey, maintainer(s) of lucianocosta/jquery.mtz.monthpicker!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library lucianocosta/jquery.mtz.monthpicker is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "lucianocosta/jquery.mtz.monthpicker",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Hello... I think it is necessary to add a button or a way to clear the input field, because input field appears read only.

Regards,
Jaime

If one has a page with two monthpicker fields, for instance, beginning_date and end_date, when user clicks at the beginning_date field and without selecting a date clicks at the end_date field, the first one remains with the calendar open.

for example if a monthpicker is already set up with:

$('#custom_widget').monthpicker({
    pattern: 'yyyy-mm',
    selectedYear: 2010,
    startYear: 2008,
    finalYear: 2012
});

then it should be possible to update the finalYear property with:

$('#custom_widget').monthpicker({finalYear: 2012});

Offer an option to show the widget when focusing the field, for TAB navigation.

You have a javascript error on your example page :
"Uncaught ReferenceError: monthpicker is not defined "

Adding monthpicker = this; at line 112 of the script (show method) make it work.

It would be greate if this plugin had this features. I'm working on it on my fork. I'd like to talk to you @lucianocosta about a planning on how define it better.

Regards.

When you fill the months table, you add the month value as td attribute named "data-month" (line 199). However, when bind the click event for month selection, you try to get this value from data (instead of attribute) and with the name "month" instead of "data-month" (lines 210 to 214).

Then, the parseInt method return a NaN and the selectedMonth shows "Undefined".

disableMonths method has the same issue (line 153).

Greetings

Alvaro

I am using jquery.mtz.monthpicker , i have one requirement that i want to disable current month and year. How to do that ??

Im using requireJS to load your jquery plugin.

It works, but sometimes when clicking on anywhere on the page, I get this in console :

TypeError: this.data("monthpicker") is undefined
http://localhost:8080/path/to/project/js/jquery.mtz.monthpicker.js
Line 119

var widget = $('#' + this.data('monthpicker').settings.id);

This is in hide: function ()

I'm using jquery 1.10.4 and i cant seem to get the dialog to disappear after selecting a month. Works fine in all other browsers. I had a similar problem with the native jquery datepicker and found a solution here: https://gist.github.com/sinelaw/5416130

This could case unexpected memory leaks or even unexpected behavior if the id somehow gets reused.

My code is like this,

var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var current_month = new Date().getMonth();
months.splice(0, current_month);
$('.from_date').monthpicker({
startYear: 1900,
selectedYear: 2015,
disabledMonths: months,
});

Please help me for a way out...

In issue #3 #3". He says he added the retention of the clicked month...is this in the current build or was it never added?

Michael

I was getting an error of ".offset.top()" not found, which drove me crazy.
Later, I found out (from the monthpicker's java script) that it also expects ID defined for that HTML element.
This should be a part of documentation..
Neverthless, this is a great control, and it really helped me a lot in my application.

Thanks

The current year selection works perfectly, it should provide as well an option for displaying a two arrows selection for the year values, the same as it is one the JQuery datepicker plugin. It's prettier.

Monthpicker can highlight a selected month and year if set in javascript as properties on calling the setup function:

$('#custom_widget').monthpicker({
   selectedYear: 2010,
   selectedMonth: 1
});

However it does not seem to be able to decifer the year and month values from the html text input tag:

<script type="text/javascript">
    $(document).ready(function () {
        $('.monthpicker').monthpicker();
    });
</script>

<input type="text" class="monthpicker" value="06/2014"/> <!—I would like to have the pre-set date display as the default selection -->

This becomes a problem when trying to use the plugin as part of a form edditor of data already on a site database.

Thanks

Thanks for your really missing jQuery plugin!

For disabling months, in your examples, you use the 'monthpicker-change-year' event with a year parameter which is received from the select item. This way of disabling months if the initially shown year has any disabled months doesn't work since the 'monthpicker-change-year' event is not fired. I recommend to add a year parameter to the 'monthpicker-show' event like this:

    show: function () {
        ...
        widget.show();
        var yearSelect = widget.find('select');
        yearSelect.focus();
        this.trigger('monthpicker-show', yearSelect.val());
    },

I'm using the chosen plugin (http://harvesthq.github.io/chosen/) on the system we are working with. The problem I'm facing is that when you try to select the year drop-down witch has been modified with chosen, the month picker fails. I used datepicker (jquery-ui) and it works with 'chosen' without any issues.

Hi,

I have tried using monthpicker plugin with this code: http://goo.gl/PUjAH

However, I get this error:

Uncaught TypeError: Cannot read property 'top' of undefined jqueryMonthpicker.js:117
methods.show jqueryMonthpicker.js:117
$.fn.monthpicker jqueryMonthpicker.js:261
(anonymous function) jqueryMonthpicker.js:87
v.event.dispatch jquery.min.js:2
o.handle.u

I am far from being JS ninja, so any help would be appreciated!

Thank you and Best Regards!

First of all thank you for a great plug in. I am trying to add a "hover" effect on the months as you mouse over them...but unfortunatly everything i have tried from css hover to changing the style with jquery... any thoughts?

When my input does not have the id attribute, the plugin does not work.

The following code uses the id attribute of input element to locate it in the line 3.
This will fail if i don't have the id in my element.

show: function (n) {
var widget = $('#' + this.data('monthpicker').settings.id);
var monthpicker = $('#' + this.data('monthpicker').target.attr("id") + ':eq(0)');
widget.css("top", monthpicker.offset().top + monthpicker.outerHeight());
widget.css("left", monthpicker.offset().left);
widget.show();
widget.find('select').focus();
this.trigger('monthpicker-show');
},

Proposed correction:

    show: function (n) {
        var widget = $('#' + this.data('monthpicker').settings.id);
        var monthpicker = $(this.data('monthpicker').target);
        widget.css("top", monthpicker.offset().top  + monthpicker.outerHeight());
        widget.css("left", monthpicker.offset().left);
        widget.show();
        widget.find('select').focus();
        this.trigger('monthpicker-show');
    },

Would like to implement the monthpicker inline (static) with the input field hidden

I have set up the pattern: 'mmm yyyy',
I then also sen in my own month names for i18n.

I give it a selectedMonth: 12 in the options.

But when I trace the code it is 12 until this line of code runs in init:
$this.monthpicker('parseInputValue', settings);

After that line of code selectedMonth is 'Dec' instead of 12

And thats a problem, because for instance when changing year in the dropdown this will run

if ($(this).val() == settings.selectedYear) 
{
  months.filter('td[data-month=' + settings.selectedMonth + ']').addClass('ui-state-active');
}

And since the html looks like so

<td class="ui-state-default mtz-monthpicker mtz-monthpicker-month" style="padding:5px;cursor:default;" data-month="12">Dec</td>

it will not find the data-month since it's now looking for 'Dec' not 12.

Not sure if this is really a monthpicker issue or Mozilla Firefox issue.

It is not possible to select any option from year select when

• monthpicker is inside bootstrap modal and tabIndex and role attributes are set
• monthpicker is isnide bootstrap modal without tabIndex and role attributes but with multiple other elements

Please see (non)working example:
https://jsfiddle.net/buksy/zu7mLnxa/

Target browser: Firefox 46.0.1
Working browser: Chrome 51.0.2704.63

jQuery's datepicker includes an onSelect-event, which triggers when a new date gets selected. I tried implementing such behavior with the monthpicker and did not suceed.

onChange on the input-field itself has no effect. onBlur triggers, but a bit too soon, so that just the previously selected value gets passed to the function.

Other possible approaches could be a hidden input-field with an onChange-event, but monthpicker doesn't seem to provide the required altField-attribute like the datepicker.

Thanks a lot for looking into it, Lucian!

P.S.: I have no idea what a github-issue is supposed to look like! :)

monthpicker.outerHeight() returns an object
change to monthpicker.height() to get the correct value

You should be able to get month and date like for ex.

yy-mm