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

Question

I have datepicker

  <input type='text' class='inp'>  
<script>
   $('.inp').datepicker();

  $(".inp").on("change",function (){ 
   console.log('inp changed');
  });
</script>

When I first change '.inp' manually type there a value, then immediately I click on datepicker's opened calendar. I get two 'change' event listeners. First from manual change, then from datepicker change. How can I avoid this?

Answer 1

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