Trigger function when date is selected with jQuery UI datepicker

JqueryEventsDatepicker

Jquery Problem Overview


How can I trigger onSelect event when I select a selected date on jQuery UI datepicker?

Jquery Solutions


Solution 1 - Jquery

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

Solution 2 - Jquery

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

Solution 3 - Jquery

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

Solution 4 - Jquery

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

Solution 5 - Jquery

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestioninkwaiView Question on Stackoverflow
Solution 1 - JqueryTats_innitView Answer on Stackoverflow
Solution 2 - JqueryRTBView Answer on Stackoverflow
Solution 3 - JqueryAndoView Answer on Stackoverflow
Solution 4 - JquerySerdar KUŞView Answer on Stackoverflow
Solution 5 - JqueryFseeeView Answer on Stackoverflow