How can I trigger onSelect event when I select a selected date on jQuery UI datepicker?
5 Answers
Working demo : http://jsfiddle.net/YbLnj/
Documentation: http://jqueryui.com/demos/datepicker/
code
$("#dt").datepicker({
onSelect: function(dateText, inst) {
var date = $(this).val();
var time = $('#time').val();
alert('on select triggered');
$("#start").val(date + time.toString(' HH:mm').toString());
}
});
-
5Why 'onSelect' isn't listed as events on datepicker API?? Commented Apr 25, 2014 at 23:09
-
1@PabloKarzin It is mentioned in
api documentation
here:)
=> api.jqueryui.com/datepicker and here => api.jqueryui.com/datepicker/#option-onSelect . Commented Apr 26, 2014 at 5:01 -
11Yes @Tats_innit, but not as an event. It's classified as a option. Maybe this is not wrong, but as a developer i like to consider it an event Commented Apr 26, 2014 at 19:56
Use the following code:
$(document).ready(function() {
$('.date-pick').datepicker( {
onSelect: function(date) {
alert(date)
},
selectWeek: true,
inline: true,
startDate: '01/01/2000',
firstDay: 1,
});
});
You can adjust the parameters yourself :-)
-
@inkwai If my anwser helped please accept it so others can learn form it. If not how can i help you further?– RTBCommented Jul 23, 2012 at 13:43
If you are also interested in the case where the user closes the date selection dialog without selecting a date (in my case choosing no date also has meaning) you can bind to the onClose
event:
$('#datePickerElement').datepicker({
onClose: function (dateText, inst) {
//you will get here once the user is done "choosing" - in the dateText you will have
//the new date or "" if no date has been selected
});
$(".datepicker").datepicker().on("changeDate", function(e) {
console.log("Date changed: ", e.date);
});
-
thanks, straightforward solution, without those val() funny stuff, also directly can be addressed this way ` $(".datepicker[name=datepicker2]").datepicker('getDate');`– FantomX1Commented Sep 3, 2019 at 15:24
-
however when using functions like getDate when inside your handler, it fails when it tries to retrieve the status of datePicker object, like this stackoverflow.com/a/17288563/3419535 ,
first = $(".datepicker[name=datepicker1]").datepicker('getDate');
– FantomX1Commented Sep 4, 2019 at 21:29
If the datepicker is in a row of a grid, try something like
editoptions : {
dataInit : function (e) {
$(e).datepicker({
onSelect : function (ev) {
// here your code
}
});
}
}