JS DateTimePicker onChange event not working

Question

JS datetimepicker onChange event not working at all.

I've tried OnSelect, OnClose, OnChange, OnHide, OnChangeMonth to trigger datetimepicker event, but none of them works.

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

$("#Datetimepicker").datetimepicker({
    format: 'MMM,YYYY',
    defaultDate: today,
    onSelect: function () {
        alert("It works!");
    }
})

$("#Datetimepicker").datetimepicker("change",function(){
    alert("It works!")});


$("#Datetimepicker").datetimepicker("changeDate",function(){
    alert("It works!")});

I've tried many ways, but still none of them working. Do I need to provide some other js library in order to make it work? Appreciate your help.

Answer 1

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 👇.................................................................................................👇

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>

To avoid this, you can use the parent as data-target. This is how the examples look in the documentation as well

<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="#target" autocomplete="off" style="width: 200px;" />
</div>

Run the snippet below and change dates to see single alert.

$("#target").datetimepicker({
  format: 'MMM,YYYY',
  defaultDate: new Date()
});

$("#target").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="#target" autocomplete="off" style="width: 200px;" />
</div>

Answer 2

When I look at the documentation I see that events have been defined by the library.

You can use the "on" function of jQuery with a custom event "change.datetimepicker" defined by the library and indicated in the documentation (https://tempusdominus.github.io/bootstrap-4/Events/).

$("#Datetimepicker").on("change.datetimepicker",function(){
    alert("It works!")});