Bootstrap DatePicker - Onchange

Question

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?

Daliladalis

Answer 1

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

Tzong

Answer 2

You can try this:

$("#myDatePicker").datetimepicker().on('changeDate', function(e) {
    alert('date has changed!');
});

Bootstrap doc reference: changeDate

Waterlog

Readers - There is a Bootstrap datetimepicker and a Bootstrap datepicker. And this often leads to confusion on event and option names, e.g., this answer is for datepicker whereas the question was about datetimepicker. – Pollerd

Answer 3

For the Bootstrap datepicker the event is changeDate in case people are looking for that: Docs

$("input[name='Date']").datepicker().on('changeDate', function (e) {
  console.log(e); //Where e contains date, dates and format
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/>

<input name="Date"/>

Landsman

Answer 4

OnChange : Function(data)
{
valueAccessor()(data);
}

Zamarripa

Thank you for this code snippet, which may provide some immediate help. A proper explanation would greatly improve its educational value by showing why this is a good solution to the problem, and would make it more useful to future readers with similar, but not identical, questions. Please edit your answer to add explanation, and give an indication of what limitations and assumptions apply. – Lind