Jquery datepicker change event trigger and input's default change event

Set your input readOnly, it will help you to change the value of field through icon only.

<input type='text' class='inp' readOnly />

then use onSelect to get selected date, as following:

$(function() {
    $(".inp").datepicker({
        onSelect: function(dateText, inst) {
            // alert(dateText);
        }
    });
});

Try using the onSelect function like:

$(function() {
    $( ".datepicker" ).datepicker({
        onSelect: function() {
        //your code here
    }});

This will be fired when they select a date from the calendar not when they are typing.


You can have onSelect trigger the change event on the text field. This way editing the date via the text box or via the date picker behave the same.

$('.inp').datepicker({
  onSelect: function() {
    return $(this).trigger('change');
  }
});
    
$(".inp").on("change",function (){ 
   console.log('inp changed');
});