Question

77

JS DateTimePicker onChange event not working

rated 0 times [ 82] [ 5] / answers: 1 / hits: 14375 / 5 Years ago, tue, october 29, 2019, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kourtney

Add To Favorites

Follow

Total Points: 368

Total Questions: 103

Total Answers: 85

Location: Bonaire

Member since Sat, May 1, 2021

3 Years ago

kourtney questions

1 Problem with typescript while making request to SWR

Sun, Oct 4, 20, 00:00, 4 Years ago

1 NodeJS and Sharp, BMP to PNG Error: Input file contains unsupported image format

Fri, May 24, 19, 00:00, 5 Years ago

1 React Slick slider map not showing slides?

Thu, Apr 4, 19, 00:00, 5 Years ago

1 Cypress - Add custom header for all XHR requests

Fri, Mar 1, 19, 00:00, 5 Years ago

1 Uncaught SyntaxError: Unexpected identifier (Typescript for front end dev without framework)

Mon, Feb 25, 19, 00:00, 5 Years ago

View All

answered 5 Years ago kalynnkathrynd · Accepted Answer

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>