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

score 6 · Answer 1 · answered Sep 25 '15 at 08:01

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 :-)

Developer · Answer 2 · 2016-03-18T02:31:08.283

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.

edited Mar 18 '16 at 02:31

answered Apr 15 '15 at 22:05

Developer

983
12
12

1

It's should be easy to get a current input element. See code I changed with comments. So to listen to specific calendar, I would add some flag to a input node and then check that flag in the event listener in the code above. A bit hackish but should work. – Developer Mar 18 '16 at 02:24

score 2 · Answer 3 · answered Sep 26 '19 at 10:39

This is a very old thread to comment but I think the answers are a bit confusing. to get the selected date you can use

$('.datepicker').on('dp.change', function(e){
//To get moment object
console.log(e.date);
//To format date into DD/MM/YYYY
console.log(e.date.format('DD/MM/YYYY'));
});

Mohamed Hana · Answer 4 · 2016-11-16T23:34:15.750

1

This is an old thread but I just faced the same problem and I did solve it by adding change event to the input.

$("body").on("change dp.change", "#your_selector", function(event){
     var date = $("#your_selector").data("datetimepicker").getDate();
     console.log(date);
});

edited Nov 16 '16 at 23:34

answered Nov 16 '16 at 23:11

Mohamed Hana

378
4
10

writeToBhuwan · Answer 5 · 2014-12-10T10:10:29.730

0

Seems like you forgot to add moment.js (before the datetimepicker.js) in your page. Add the script and it should work just fine.

edited Dec 10 '14 at 10:10

answered Dec 10 '14 at 10:04

writeToBhuwan

3,233
11
39
67

It is there, and im sure it is loaded BEFORE the datetimepicker – user2002495 Dec 10 '14 at 10:24
Getting any error in the console?? Press F12 in chrome and ctrl+shift+I in firefox and check – writeToBhuwan Dec 10 '14 at 10:25
Is it because I add it to the class instead id?But I have tested with id and it won't work either – user2002495 Dec 10 '14 at 10:25
No, both class and ID are inside jquery wrapper and both are treated in the same way(as jQuery object) – writeToBhuwan Dec 10 '14 at 10:26
Have you checked this link ?? http://stackoverflow.com/questions/22500662/bootstrap-3-datetimepicker-events-not-firing-up – writeToBhuwan Dec 10 '14 at 10:26
Seems like a cache issue.. Clean browser cache or simply press ctrl+f5 to refresh the page – writeToBhuwan Dec 10 '14 at 10:29

Bootstrap Datetimepicker Trigger "dp.change" on Class

5 Answers5