kidsysco / jquery-ui-month-picker Goto Github PK

Jquery UI has next and previous labels for the next and back buttons. For consistency, these should be present in the month picker as well.

Not really an issue - but I was wondering if there was a way to maybe pass json to specify which months are selectable? ie. I want the user to be able to select a month based on a set of 'valid' months.

Hi,
It's possible select multi month ?
If not, Can I try implement?

Hi, thanks for the wonderful Month Picker.
I wish to know how can I remove the dot behind month ? eg. "Jan." to "Jan".
And further, how can I change it to other language?

Is it possible to save the selection as a date value? I see this as returning the last day or first day of the selected month. Right now the Request value of this field is something I have to parse out to convert to a date value to query a database for a given month.

I apologize if this isn't the correct place to pose the question.

According to the traffic graph and this comment in #35, it seems a lot of people are looking at the demo directory and expecting to find something useful and interesting, but instead they find two minified files that grunt generates that we use in the demo page.

What I think we should do is:

• Move the demo site (gh-pages branch) to the demo directory.
• Move the minified output to the /demo directory.
• Make the demo page reference MonthPicker.min.js and jquery.maskedinput.js individually (instead of minifying them together).
• Setup a grunt task which will automatically merge/deploy the demo dir to the gh-pages branch.

Thanks for this nice api 👍

I want to set current month/year on load event of MonthPicker control.
How to do that?

This is the way I am trying:
$('#select_month_year').MonthPicker({ Button: false }).MonthPicker('setDate',new Date());

But its not working. Kindly help.

When specifying a date string for MinMonth it appears I need to add a day to get the result I'm looking for.

When I specify MinMonth: new Date("2010-01-01") I can select an option for Dec 2009. I've worked around this by setting MinMonth: new Date("2010-01-02").

This isn't a huge issue, but a FYI.

Thanks for writing this plugin. Exactly what I needed.

Datepicker is undergoing a complete rewrite with a new API. You can see the new API and some notes on the planning wiki. You can also test out the code in the datepicker branch.

Let us know if you have any questions or if there are any extension points that would make it easier to implement the month picker.

When used in IE8 the folowing exception is thrown:
"Object doesn't support property or method 'indexOf'"

The error occurs since this commit:
f5c5a75

How do I have it so that if I were to enter the year manually it would not jump to the date on the calendar?

Since we've moved the ReadMe to the wiki it looks like links that refer to a Fragment Identifier (a.k.a hash) in order to refer the user to another page in the documentation don't work and need to be updated.

I'm still reading to see what this requires.

• Add release tags to the repository.

The new unit test system is so awesome, and there were some issues with the tests I wrote that still need to be resolved. These issues were compounded with the latest updates to the testing system.

The position test fails in the browser for 2 reasons...

1. Scrolling
   The position tests scroll the window so that the input is in view. If we place the qUnit Test Output at the top of the page, then the position unit tests do not account for this and scroll the extra height. This is not an ideal solution because then anything we put at the top of the page will affect these tests that scroll the window to a certain location. My first thought to address this is to move the position test to the very top of the page as the first test, this way it is always in view and no scrolling is needed.
2. CSS
   The right alignment is pushing the edges of the div up against the window boundry. There is some margin or padding or some CSS doing that.

I would like to get in to fix this and I don't want Benjamin to get in there and beat me to it!

LOL!

This new test system is just soooo cool, it's like having a new toy to play with! So I want to handle this one here today.

WOOT!

feature request.

Accidentally or intentionally clicking inside date input without button makes the date calendar bubbles and reset. Same for buttons options.
Sometimes due to faulty or sensitive mouse clicking this bubbling seems awkward.
Would be nice if the bubbling stops after first click if calendar is already visible.

when I open the menu, then hover, it says Jump Years as it is supposed to... Then if I click Jump Years, and then choose a year. It seems like it no longer fades in to say Jump Years anymore after that first time I selected a year.

However, if I do not select a new year and I go back to 2016 instead, then it will fade in Jump Years.

Hi,

You month picker is really awesome.
But I have something wrong.
Month picker show current year when I first click that's true.
And month picker still showing current year when I click the next time.
That shouldn't be still showing current year, that should be showing my choosing year.
Please help me if you have some answer.

Best Regards,
Swan

Hi Guys,

After execute

$().MonthPicker('options', 'SelectedMonth', 'mystringmonth')

alternative field keep old value
I don't know if this is a issue o normal behavior
i try update _setSelectedMonth

_setSelectedMonth: function (_selMonth) {
        var month = _encodeMonth(this, _selMonth), _el = this.element;

        if (!month) {
            _el.val('');
            this._updateAlt(0, ''/*i´m not sure how to send empty value */);
        } else {
            var d = new Date(_toYear(month), month % 12, 1)
            _el.val(this._formatMonth(d));
            this._updateAlt(0, d);
        }

        this._ajustYear(this.options);
        this._showMonths();
    },

thansk for your attention

Nice plugin...it works almost exactly the way I want. Would it be possible to add two options like jqueryui's datepicker:

buttonImage -- to allow me to set the icon's image
showOn: "both" -- Controls when the picker appears. The picker can appear when the field receives focus ("focus"), when the icon button is clicked ("button"), or when either event occurs ("both"). Currently if the icon is shown, there doesn't appear to be a way to make the picker appear on focus.

Thanks!

On a given page if you have multiple input fields using Month Picker, and user clicks on first input field followed by click on second input field then multiple windows of calendar remains open and it start to mess the page structure.

This is reproducible on GitHub and also attaching a screenshot from my application to show this issue.

Also from my application

Discussing autoloading with a friend yesterday, posting here so I don't forget.

function CheckForCssClass (className) {
        var hasstyle = false;
        var fullstylesheets = document.styleSheets;
        for (var sx = 0; sx < fullstylesheets.length; sx++) {
            var sheetclasses = fullstylesheets[sx].rules || document.styleSheets[sx].cssRules;
            for (var cx = 0; cx < sheetclasses.length; cx++) {
                if (sheetclasses[cx].selectorText == className) {
                    hasstyle = true; 
            break;
                }
            }
        }
        return hasstyle;
    };

Picker loads with month-picker-previous and month-picker-next buttons disabled.

The problem seems to be that _value is null (not false, but falsie) on input.
The check if (_btnWidget.option('disabled') !== _value) is true, so _btnWidget.option('disabled', _value) executes, which disables the buttons.

An easy fix is to validate _value:
_value = !(!_value);

Hi,
I am using the inline version of the monthpicker.
<div class="monthly-input"></div>
Im using jQuery-UI v1.11.4 with jQuery v2.1.4.
1 - I click on one of the months and it is colored as selected (it has the ui-state-active class).
2 - As soon as I click outside the monthpicker the "ui-state-active" class is removed and the month looks unselected.
With jQuery-UI v1.9.2 works fine. Im using Chrome v48.0.

Any suggestions? Thank you.

"(optional) Digital Bush Masked Input jQuery Plugin"

Getting error via the unmask method which trying to invoke but not using it since document states optional.

Hi.

I've downloaded the latest version of this plugin. In the demo, the inline month picker doesn't shows up. Also, I tried to add it on my site (with the latest versiones jquery and jquery-ui) and didn't appear nothing.

It's a bug?

If the MonthPicker is open when the user closes its parent Dialog, the MonthPicker remains on screen.

Hey Benjamin,

in your package.json you list LGPL-2.1 as the current licence version. But in MonthPicker.js you mention *GNU Lesser General Public version 3.0 *.

What is the correct licence version?

Thanks a lot!
Sebastian

Years higher than 2099, and lower than 1900 do not register - they default to some other arbitrary year.

Nevermind - this was due to another the mask plugin I was using.

https://kidsysco.github.io/jquery-ui-month-picker/

Point to the wiki!

very nice plugin, but it's really a pity that it isn't compatible with HTML5 input[type=month], because it explicitely checks for input[type=text] and the "month/year" format is hardcoded, while input[type=month] uses "year-month" as date format. I would like to use this plugin as fallback for input[type=month] for browsers not yet supporting this input type with a native monthpicker widget.

I really think we should add something like supported versions section in the Wiki.

When a user looks at browser and jQuery versions the main thing they are trying to do is answer the question can I use this plugin?

The user doesn't really care in what specific versions of jQuery we tested the plugin as long as we support there version.

I think we can say we support:

jQuery version 1.9.1 and above.
jQuery UI 1.9.2 and above.
All modern browsers.
A limited set of ancient browsers (IE 8-11).

Hello,

Thanks for the plugin, its saved me a massive amount of time and was easy to implement :)

I have a situation where i need an onLoad event.

For the example below, I set a data attribute of the input when OnBeforeMenuClose. I want to set the data attribute when onLoad of the datePicker happens (because i have selectedMonth: set). Similar to ChartJs's event afterDraw.

So i would have something to this effect:

$('.js-datepicker').MonthPicker({ 
        ShowIcon: false,
        MonthFormat: 'MM yy',
        SelectedMonth: new Date(),
        OnBeforeMenuClose: function(event){
            $(this).attr('data-date',new Date(this.value).toLocaleDateString("en-GB"));
        },
        OnceLoaded: function(event){
            $(this).attr('data-date',new Date(this.value).toLocaleDateString("en-GB"));
        },
    });

I know in my case i could make a plan with the date. But i thought the OnLoad might be a useful event to have anyways :)

Thanks,
G

When I open https://kidsysco.github.io/jquery-ui-month-picker/ in IE8.
The inline menu month picker isn't appear and there're alert "MonthPicker can only be called on text or month inputs"
This only happened in the actual IE8. The monthpicker in IE8 emulation on IE11 is still working.

It makes sense that the month picker plugin will be used side by side with jQuery UI's Datepicker, so it makes sense that it will behave like it (at least from the user's perspective).

Here is a list of behaviors that cannot be changed without changing the plugin's source:

• Animation effect and speed (Datepicker's default is a fadein animation that takes 400ms).
• Button image and show behavior (looks like I'm not the first one to mention this #5).
• this doesn't refers to the associated input field in all of the API's callbacks.
• The month format is not as flexible as the dateFormat option.
• Pressing enter should choose the current date and close the menu.

If anyone finds other inconsistencies please point them out here.

I've already implemented a Duration option which behaves like Datepicker's duration option which allows the user to choose from 3 predefined speeds:

• normal (the default) 400ms
• fast 200ms
• slow 600ms

Or you can specify the speed in milliseconds by passing in a number.

The Duration option's implementation is similar to Datepicker's one (it's based on $.fx.speeds).

I'm not sure yet if I will add support for jQuery UI's effect's in the show/hide animation options seeing as it might require a workaround in order to get it to work with jQuery UI position.

I will post more about this later.

The version I'm using at my company already has a Format option it's implementation is based on $.datepicker.formatDate, but like i've said in my first pool request it needs a little polishing before I can make it open source.

I am planning to have two branches the master branch which all commits to it will not change the existing default behavior but will offer (most) of the options to make it be more consistent with datepicker, and another branch (I think I'll call it datepicker-consistent) which by default will aim to be as consistent as possible with Datepicker.

Just as you've described in #39 the month picker shows up as far below the input as you scrolled.

This bug only happens in Internet Explorer when you are using the latest versions of jQuery (1.12.0 and 2.2.0).

Stay tuned as I dive into the details and figure out what's going wrong.

Until then I will update index.html to use jQuery version 1.11.3 which doesn't seem to have this problem.

Should be an i18n var if you choose to use the button text instead of an icon.

Hi Folks,
I have a small tester here: http://kompsoft.de/test/eqdkp/ajax/calendarmonthcheck/demos/basic-views.html

if you click on the month Name in the Header, the monthpicker Shows up. All working. Only Thing currently not working is the previous and next button. These Buttons are disabled.

Any idea? Maybe fullcalendar intereferes with the Dates?

I'd like to suggest a redesign of the menu which aims to look as consistent as possible with Datepicler.

The redesign will:

1. Make the white background wrap around the header (year table) and buttons.
2. Reducing the margin between between the buttons.
3. Make the next/prev buttons have a transparent background that will show when you hover (mouse over) the them. (not implemented yet).
4. Turn the year title into a button with the label 'Jump years' when you hover (mouses over) any part of the header. (not implemented yet).
5. Slightly reduce the padding in the header (not implemented yet).
6. Remove the width: 60px; rule from the month-year-input class (believe it or not I fixed unit tests that were affected by this change).

You can take a look at the progress in my 3.0_prototype branch and in the fiddle I've setup.

NOTE: The fiddle is currently a prototype and is still under development, this means you might experience bugs and the visual design might change.
I will comment on this issue I make visual changes.

This should be an easy upgrade for most users assuming they didn't have CSS that depends on the old markup.

However this still involves making potentially breaking changes (especially to our unit tests) which I believe are well worth it.

Take a look at what I've did so far and give me your honest opinion (see the fiddle).

I'm not going to implement the rest of the changes unless we both agree on the new design and the breaking changes involved.

howdy - love the plugin, but in my current wordpress site, opening the month picker adds it to the bottom of the page. I have a working normal ui date picker on the same page.
any ideas?
thanks!

Upon clicking the input once, the menu opens. While open, if you click the input again, it closes then re-opens the menu.

This behavior does not exist when using the icon to open the menu.

I wouldn't have noticed or cared but it looks like Google put some attention to the HTML 5 Month Input type. There are new controls in the input that each respond to a click and pass along the hide/show events. SO if you try to use the spinners in the new Google Chrome HTML 5 input, it gets kinda flashy.

Is it possible to disable past months once first month is set?

https://github.com/KidSysco/jquery-ui-month-picker/wiki/MaxMonth-Option

The min and max month wikis seems duplicate of each other. The options parameter in example of maxmonth says minmonth.

Please add this package to NPM so we can all auto update it from npm.

Thanks!

The demo on JSFiddle is missing one of the necessary CSS files and is not displaying the image icon (like it did before restructuring the project).

Please "pull" the changes from this fork of the fiddle.

IMPORTANT: Please Make sure you update the:

• External resources (added test/test.css).
• The CSS pane on the right.
• The fiddle's JavaScript pane (on the bottom).
• The Load type (in the JavaScript settings) to onDomready.

hi.
I want to know whether the widget support an other lanuage or not? just like chinese.if support what should i do?

Hello,

Is there any plans for putting in this functionality where the month picker opens up on tabbing into an input field?

I looked into the code and was able to figure closing of the month picker while tabbing out.

Issue was fixed by adding one more switch statement

_keyDown: function() {
var keyCode = $.ui.keyCode;
switch (event.keyCode) {
case keyCode.ENTER:
this._chooseMonth(new Date().getMonth() + 1);
this.Close();
break;
case keyCode.ESCAPE:
this.Close();
break;
case keyCode.TAB:
this.Close();
break;
}
},

Version used : 2.5

It would be nice if we could have an option for changing the easing function of the opening/closing animation of the calendar.

When you attach MonthPicker to an input with an OnChange event, the event does not fire after selecting a date.

Hello,

We found this date picker based on JQuery UI. So it is very cool component, but we did not found any option to disable some dates.

Actually, we need this feature to disable some taken dates of our calendar. Is this option available in new versions?

Best regards,

Jose Luis