jQuery datepicker onChangeMonthYear event not firing - javascript

I am trying to build an app based on jQuery date picker. Here is my fiddle: http://jsfiddle.net/Lf6sD/2/. There is a onChangeMonthYear even mentioned in the options, which is supposed to do a simple alert when user changes month or year either through the drop downs or the navigation buttons on the top left and top right.
However, the alert doesn't appear when I am changing month or year either way.
Can anyone tell me what is wrong, and how do I capture the event?

You have onChangeMonthYearType
Change it to this:
onChangeMonthYear: function(year,month,instance) {
alert("h");
}

Use onChangeMonthYear not onChangeMonthYearType,
onChangeMonthYear: function(year,month,instance) {
alert("h");
}
Updated Demo

Related

free-jqgrid with bootstrap and datepicker issue

I am using demo sample located https://jsfiddle.net/OlegKi/90qmjean/3/
Some reason datepicker is not rendering? also i need to set dateformat to
ISO8601Long:"Y-m-d H:i:s"
But with original date formatter shows selected date as 'Y-3-14 H:i:s'
see the screenshot for details:enter image description here
The problem, which you described in comments above, is the following: you are wonder why the Bootstrap datetimepicker, used in the demo http://jsfiddle.net/OlegKi/duooa5oy/1/, don't close the calendar window after choosing the date.
First of all, I want to stress, that it's the default behavior of the Bootstrap datetime picker. You can try any demo on the page http://eonasdan.github.io/bootstrap-datetimepicker/ to verify that. The reason of the behavior is easy to understand. The datetimepicker allows to change the time and not only the date. The corresponding control contains 4 buttons, which increase/decrease the time via click on the buttons. I marked the buttons on the picture below:
Thus, what you probably want is closing of the datetimepicker if the date (and not the time) is changed. One can implement the requirements by adding the following lines in the demo:
$(el).bind("dp.change", function (e) {
if (e.date.dayOfYear() !== e.oldDate.dayOfYear()) {
$(this).data("DateTimePicker").hide();
}
});
See the modified date http://jsfiddle.net/OlegKi/duooa5oy/7/
It looks like when i updated boostrap-datepicker to latest version, it worked.

AngularJS - Bootstrap Datepicker

I have a problem with a bootstrap datepicker. Here is a Plunker example.
This one is not from me. To get it working, you have to change line 60 into:
else if (attrs.initDate)
Just delete the exclamation mark.
Now you get the init-date in the 2nd input-field.
My Problem:
If you click in the 2nd input-field and click somewhere in the document without selecting a date, it changes the init-date into todays date. I want to keep the init date, dough.
Does anyone have a solution for it?
you can look at the documentation here:
http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#forceparse
look at the forceParse, you need to set it to false.
so just add:
$(element).datepicker({
format: format,
forceParse: false

Date time picker in bootstrap modal, scrolling

I have a problem when scrolling in bootstrap modal with the date time picker plugin. (not date picker).
When I am scrolling in modal, the date box stays fixed page, but normally it shouldn't do that
Where is a lot solutions for bootstrap-datepicker, but I use bootstrap-datetimepicker , and I can't find a solution for it, or maybe I can't find it?
Add position: relative; to the parent container.
I also had encountered the same problem, and my date time picker default is displayed below the input box, the separation of the input box and date time picker plug when slide the modal, the I can let the date time picker plug default display on the input box above, so my javascript code is:
$('#datetimepicker').datetimepicker({
#this is other option
...
pickerPosition: 'top-right',
});

JQuery UI Datepicker Thai Buddhist Year

I am using jquery-1.11.0 and jquery-ui datepicker to achieve a dropdown datepick on my textfield.
However, for Thailand, there is something call the Buddhist year which adds 543 to our current phyiscal year. How can I achieve this with the jquery datepicker? I have tried the follow sites but due to different jquery version, it seems to have a weird behaviour.
https://code.google.com/p/jquery-ui-datepicker-extension-buddhist-era/
http://www.anassirk.com/articles/1
http://keith-wood.name/calendarsPickerRef.html
What you describe is fairly trivial with leveraging the datepicker's yearSuffix option, which allows you to insert unescaped html. Something like:
In stylesheet:
.ui-datepicker-year { display:none; }
In onChangeMonthYear:
inst.settings.yearSuffix = year + 543;
See jsfiddle here
Disclaimer: At some point someone will probably realize what a terrible idea it is to append unescaped html to your widget's titlebar, and this will become unusable. Should be fine for 1.11.0/1.10.4.
Disclaimer2: I know absolutely nothing about Buddhist years. This simply changes the visible year to year+543. It handles absolutely no corner cases

jquery ui dateinput alternative field

I am using jquery ui dateinput and i am showing the calendar when the user clicks a small image. In the calendar i have set the selectors to true, so it also shows months and years. What i want, is to pass the chosen date into a textbox as a value.
I did this so far.
$("img[id='CalIcon']").data("dateinput").onHide(function(e){
var dt = $("img[id='CalIcon']").data("dateinput").getValue('dd-mm-yyyy');
$('#relativeDOB').attr({value:dt});
});
The problem is that whatever year or month i am choosing is passing only the current. The day works fine.
Any ideas?
thanks

Categories

Resources