twitter-bootstrapbootstrap-4datepickereonasdan-datetimepicker

Bootstrap DatePicker - Onchange


I am using the Bootstrap 3 Datepicker plugin. When the user chooses a date, I want to update various parts of my UI. I'm basically trying to create a function that is called when the date changes. However, I've been unsuccessful in my attempts. Currently, I'm trying the following

$('#myDatePicker').datetimepicker({
  change: function() {
    alert('date has changed!');
  }                  
});

Unfortunately, the change function never fires. How do I call a function when the date is changed in the date picker?


Solution

  • Bootstrap 4

    The eonasdan datepicker plugin is no longer supported in Bootstrap 4, but there is a new plugin: https://tempusdominus.github.io/bootstrap-4

    "Tempus Dominus is the successor to the very popular Eonasdan/bootstrap-datetimepicker"

    To detect the change event, use:

    $("#datetimepicker1").on("change.datetimepicker", function (e) {
        if (e.oldDate !== e.date) {
            alert('You picked: ' + new Date(e.date).toLocaleDateString('en-US'))
        }
    })
    

    Datepicker demo: https://codeply.com/p/kS0t1Ko61K


    Bootstrap 3 (original answer)

    According to the docs, the event is dp.change:

    $('#myDatePicker').datetimepicker().on('dp.change',function(e){
        console.log(e)
    })
    

    http://www.codeply.com/go/5cBJkEHiAt