Trigger function when date is selected using jQuery UI datepicker

Question

How can I raise the onSelect event when I select the selected date on jQuery UI datepicker?

Answer 1

Working demo : http://jsfiddle.net/YbLnj/

Documentation: http://jqueryui.com/demos/datepicker/

the 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()); } }); 

Answer 2

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 :-)

Answer 3

If you are also interested in the case when the user closes the date selection dialog without selecting a date (in my case, choosing a date does not matter) 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 }); 

Answer 4

 $(".datepicker").datepicker().on("changeDate", function(e) { console.log("Date changed: ", e.date); }); 

Answer 5

If datepicker is in the grid row, try something like

 editoptions : { dataInit : function (e) { $(e).datepicker({ onSelect : function (ev) { // here your code } }); } }