View examples and some doc live.
lucianocosta / jquery.mtz.monthpicker Goto Github PK
View Code? Open in Web Editor NEWMonthpicker, the missing JQuery widget.
Home Page: http://lucianocosta.com.br/jquery.mtz.monthpicker
Monthpicker, the missing JQuery widget.
Home Page: http://lucianocosta.com.br/jquery.mtz.monthpicker
View examples and some doc live.
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
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?
It would be quite nice to be able to display it inline, the way jQuery's datepicker does : http://jqueryui.com/datepicker/#inline
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.
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...
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
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!
Would like to implement the monthpicker inline (static) with the input field hidden
This could case unexpected memory leaks or even unexpected behavior if the id somehow gets reused.
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.
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
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 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
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');
},
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
Please see (non)working example:
https://jsfiddle.net/buksy/zu7mLnxa/
Target browser: Firefox 46.0.1
Working browser: Chrome 51.0.2704.63
monthpicker.outerHeight() returns an object
change to monthpicker.height() to get the correct value
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.
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 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.
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:
(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.
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
If present it should ovewrite initial settings for its widget.
Currently there seems to be no CSS effect to show the selected month on the monthpicker.
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
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.
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?
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 ()
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.
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!
Offer an option to show the widget when focusing the field, for TAB navigation.
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.
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.
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());
},
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});
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?
You should be able to get month and date like for ex.
yy-mm
I am using jquery.mtz.monthpicker , i have one requirement that i want to disable current month and year. How to do that ??
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.