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?

Carol Skelly · Accepted Answer · 2019-11-19T17:56:29.760

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

Lahiru · Answer 2 · 2017-03-27T13:06:36.600

4

You can try this:

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

Bootstrap doc reference: changeDate

edited Mar 27 '17 at 13:06

answered Mar 27 '17 at 12:50

Lahiru

1,428
13
17

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. – Yogi Apr 22 '18 at 23:45

score 1 · Answer 3 · answered May 16 '18 at 09:53

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"/>

score -1 · Answer 4 · answered Jun 27 '17 at 11:34

-1

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

answered Jun 27 '17 at 11:34

user8220317

1

Thank you for this code snippet, which may provide some immediate help. A proper explanation [would greatly improve](//meta.stackexchange.com/q/114762) 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. – Toby Speight Jun 28 '17 at 16:02

Bootstrap DatePicker - Onchange

4 Answers4

Linked