Datepicker Onchange Event Not Firing in Jquery

jQuery Datepicker on change event is not getting fired when using button instead of text input

I have found it:

$(".test").datepicker(params).on('hide', v => console.log(v.date));
// will return a date object with the selected date

JS DateTimePicker onChange event not working

As mentioned by @Bluety you have to use the events provided by the library.

In your case you can use change.datetimepicker event. The event handler function receives old date and new date which can be used for any comparisons you might need.

$("#Datetimepicker").on("change.datetimepicker", ({date, oldDate}) => {              
                 //Use date and oldDate here
          })

Also note that, in your case the input element is same as datepicker target, This can lead to duplicate events triggered ................................................................................................./p>

id="Datetimepicker" data-toggle="datetimepicker" data-target="#Datetimepicker"

You can run the snippet below and change the date to see multiple alerts for one event.

$("#Datetimepicker").datetimepicker({          format: 'MMM,YYYY',          defaultDate: new Date()      }      );
      $("#Datetimepicker").on("change.datetimepicker", ({date, oldDate}) => {              console.log("New date", date);              console.log("Old date", oldDate);              alert("Changed date")      })

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />




<div id="target" style="position:relative" data-target-input="nearest">        <input type="text" class="form-control datetimepicker-input" id="Datetimepicker" data-toggle="datetimepicker" data-target="#Datetimepicker" autocomplete="off" style="width: 200px;" />    </div>

Datepicker Onchange Event Not Firing in Jquery

jQuery Datepicker on change event is not getting fired when using button instead of text input

JS DateTimePicker onChange event not working

Related Topics

Leave a reply