jQuery UI Datepicker after select/change month/year
Solution 1
Here is hacky hack.
It works, highlights the next day( the next td
in this case).
setTimeout is because I think jquery ui destroys the active date item, so we wait until we have the right one.
You might be able to use onSelect
instead of .change
, but not a big deal imo
I left a console.log in there so you can see a little bit of whats going on.
Solution 2
You can use the provided jQuery datepicker events onSelect
and onChangeMonthYear
.
Code:
$("#datep").datepicker({
changeMonth: true,
changeYear: true,
onSelect: function () {
console.log('s');
},
onChangeMonthYear: function () {
console.log('o');
}
});
Demo: http://jsfiddle.net/IrvinDominin/Xx4GS/
Solution 3
There is an event called "onSelect" having the date as its param. see this example:
$("#datePicker").datepicker({
//the format
dateFormat: "dd/mm/yy",
//called when date is selected
onSelect: function (date) {
alert(date);
}
});
Cou can find all the details in the api-doc: http://api.jqueryui.com/datepicker/#option-onSelect
Martin Tale
Updated on June 04, 2020Comments
-
Martin Tale almost 4 years
I wanted to find out how I can run some piece of code (attach mouseenter event) for every day after user has selected a day or changed a month/year?
I have tried to attach the event on these events
- beforeShow
- beforeShowDay
- onChangeMonthYear
- onSelect
On hover I want to highlight next day in the same row if it exists.
Currently I attach moouseenter/mouseleave event to all days after datepicker is created (which is inline).
I have simplified what I'm doing in the JS fiddle below. I need to have those events working after a date is selected and after month/year has been changed.
JS Fiddle: http://jsfiddle.net/MartinTale/Xx4GS/2/
$("div").datepicker({ changeMonth: true, changeYear: true, inline: true, altField: "#datep" }); $("tbody td:not(.ui-state-disabled, .active-calendar-cell)").mouseenter(function (e) { $(this).closest('td').next().find("a").addClass("hover-calendar-cell"); console.log('test'); }); $("tbody td:not(.ui-state-disabled)").mouseleave(function (e) { $("a.hover-calendar-cell").removeClass("hover-calendar-cell"); console.log('test out'); });
Thanks in advance.
-
Martin Tale almost 10 yearsThis helped a lot and steered me in the right direction. Thank you. Result for the simplified version: jsfiddle.net/MartinTale/Xx4GS/4