Get selected date in jqueryui datepicker inline mode
Solution 1
You can retrieve the date by using the getDate function:
$("#datepicker").datepicker( 'getDate' );
The value is returned as a JavaScript Date object.
If you want to use this value when the user selects a date, you can use the onSelect event:
$("#datepicker").datepicker({
onSelect: function(dateText, inst) {
var dateAsString = dateText; //the first parameter of this function
var dateAsObject = $(this).datepicker( 'getDate' ); //the getDate method
}
});
The first parameter is in this case the selected Date as String. Use parseDate to convert it to a JS Date Object.
See http://docs.jquery.com/UI/Datepicker for the full jQuery UI DatePicker reference.
Solution 2
$(document).on("change", "#datepickerdiv", function () {
alert($(this).val())
})
This is the simplest answer in Jquery.
Solution 3
I was trying to work with close event
but it also used to trigger when calendar is open and I click somewhere else on the scree. Eventually calendar loses focus
and close event
it called. So i found this one;
onClose: function (dateText, inst) {
function isDonePressed() {
return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
}
if (isDonePressed()) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
}
Related videos on Youtube
Dushan Perera
❤️ building super 🚅 fast 🏎️ web experience 🚀 Azure functions <⚡> is my recent area of interest. Former ASP.NET MVP Please feel free to suggest improvements to my posts
Updated on July 09, 2022Comments
-
Dushan Perera almost 2 years
I am trying to use jqueryui datepicker. I want to use the inline mode.
I want to know how can I get the selected date when user selects a date. Where to get and how to get ?
-
Dmytro over 10 yearsThis helped me to convert date to different format after
onSelect
. Example:$.datepicker.formatDate("yy-mm-dd", $(this).datepicker("getDate"));
-
waghekapil about 9 yearsThanks! Saved my day. var dateAsString = dateText; helped me to get the selected date.