Bootstrap Datetimepicker Trigger "dp.change" on Class

Question

I'm using this package for my datepicker. I'm initiating the plugin like this (CS):

$('.datepicker').datetimepicker({
    pickTime: false,
    language: 'en'
    })
.on('dp.change', (e) =>{
    console.log 'this'
})

The datepicker works fine, but the dp.change event is not triggered, anyone can explain why?

[DIRTY SOLUTION]

For now I'm using something like this, very ugly solution though:

$('.bootstrap-datetimepicker-widget').on("click","td.day", () => {
    date = $('.datepicker input[type=text]').val()
    $('.datepicker p').find('span').text(date)
})

Answer 1

The documentations https://eonasdan.github.io/bootstrap-datetimepicker/ Gives you an example on how to do this. (Just tested it and if you copy+paste the code, it will work fine.)

        $("#datetimepicker6").on("dp.change", function (e) {
//do your action here
        });

The ID of the jquery selector, you put the element you activated the datepicker for (i.e. initiated it like:

$('#datetimepicker6').datetimepicker();

) Let me know if it didn't work out for you :-)

Answer 2

If you don't know the DOM ID of the element, you may listen to events on the document:

$(document).on('dp.change', function (e) {
  // here `e` is an event itself.
  // So, `e.target` should be a DOM element of the input field.
  if ($(e.target).data('object') === 'calendar1') {
      console.log('calendar1 just changed');
  } else {
      console.log('nope, we are waiting for calendar1 changes only');
  }
});

I hope this helps.