bootstrap datepicker change date event doesnt fire up when manually editing dates or clearing date

Question

<script type="text/javascript">
    // When the document is ready
    $(document).ready(function () {
        $('.datepicker').datepicker({
            format: "yyyy-mm-dd",
        }).on('changeDate', function(ev){
            // do what you want here
            $(this).datepicker('hide');
        }).on('changeDate', function(ev){
            if ($('#startdate').val() != '' && $('#enddate').val() != ''){
                $('#period').text(diffInDays() + ' d.'); 
            } else {
                $('#period').text("-");
            }
        });
    });
</script>

So here's what my datepicker looks like. So basically when I change date by clicking mouse it works good, however when I manually change date with keyboard or manually clear the date change date event doesn't get called. Is this a bug or am I doing something wrong here ?

Bradley Trager · Accepted Answer · 2017-11-08 11:09:08Z

46

You have to use the change event on the input itself if you want to respond to manual input, because the changeDate event is only for when the date is changed using the datepicker.

Try something like this:

$(document).ready(function() {
    $('.datepicker').datepicker({
        format: "yyyy-mm-dd",
    })
    //Listen for the change even on the input
    .change(dateChanged)
    .on('changeDate', dateChanged);
});

function dateChanged(ev) {
    $(this).datepicker('hide');
    if ($('#startdate').val() != '' && $('#enddate').val() != '') {
        $('#period').text(diffInDays() + ' d.');
    } else {
        $('#period').text("-");
    }
}

edited Nov 8, 2017 at 11:09

answered Mar 19, 2014 at 13:43

Bradley Trager

3,5903 gold badges29 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Marijus Over a year ago

Could you give me an example ?

scorpio1441 Over a year ago

.change(...).on('changeDate') causing double firing.

Sritam Over a year ago

Instead of 'changeDate' try 'dp.change' that worked for me

prakash tank Over a year ago

how to get month change event?

Musaddiq Khan Over a year ago

I have value for input datepicker e.g 08-16-2017. When page is refreshed the value 08-16-2017 is assigned to input field. Is it possible to trigger changeDate via code after assigning value.

|

dnxit · Accepted Answer · 2014-08-29 05:45:43Z

8

In version 2.1.5

bootstrap-datetimepicker.js
http://www.eyecon.ro/bootstrap-datepicker
Contributions:
Andrew Rowls
Thiago de Arruda
updated for Bootstrap v3 by Jonathan Peterson @Eonasdan

changeDate has been renamed to change.dp so changedate was not working for me

$("#datetimepicker").datetimepicker().on('change.dp', function (e) {
            FillDate(new Date());
    });

also needed to change css class from datepicker to datepicker-input

<div id='datetimepicker' class='datepicker-input input-group controls'>
   <input id='txtStartDate' class='form-control' placeholder='Select datepicker' data-rule-required='true' data-format='MM-DD-YYYY' type='text' />
   <span class='input-group-addon'>
       <span class='icon-calendar' data-time-icon='icon-time' data-date-icon='icon-calendar'></span>
   </span>
</div>

Date formate also works in capitals like this data-format='MM-DD-YYYY'

it might be helpful for someone it gave me really hard time :)

answered Aug 29, 2014 at 5:45

dnxit

7,3602 gold badges34 silver badges34 bronze badges

1 Comment

RogerDodge Over a year ago

As of version 4.7.14, the correct event reference is "dp.change"

Ravi S. Singh · Accepted Answer · 2016-02-03 08:03:37Z

7

The new version has changed.. for the latest version use the code below:

$('#UpToDate').datetimepicker({
        format:'MMMM DD, YYYY',
        maxDate:moment(),
        defaultDate:moment()            
    }).on('dp.change',function(e){
        console.log(e);
    });

answered Feb 3, 2016 at 8:03

Ravi S. Singh

6578 silver badges16 bronze badges

Comments

Petr · Accepted Answer · 2015-06-18 07:29:05Z

5

Try this:

$(".datepicker").on("dp.change", function(e) {
    alert('hey');
});

answered Jun 18, 2015 at 7:29

Petr

1,2191 gold badge18 silver badges29 bronze badges

2 Comments

Karlen Kishmiryan Over a year ago

Also describe your solution, so it will be clear what and why you're trying to do in your code.

Dropout Over a year ago

Please explain your answer.

Musaddiq Khan · Accepted Answer · 2017-08-26 05:28:38Z

1

I found a short solution for it. No extra code is needed just trigger the changeDate event. E.g. $('.datepicker').datepicker().trigger('changeDate');

answered Aug 26, 2017 at 5:28

Musaddiq Khan

1,93719 silver badges17 bronze badges

Comments

Yogesh · Accepted Answer · 2020-12-31 15:25:05Z

1

Try with below code sample.it is working for me

var date_input_field = $('input[name="date"]');
    date_input_field .datepicker({
        dateFormat: '/dd/mm/yyyy',
        container: container,
        todayHighlight: true,
        autoclose: true,
    }).on('change', function(selected){
        alert("startDate..."+selected.timeStamp);
    });

answered Dec 31, 2020 at 15:25

Yogesh

7351 gold badge7 silver badges20 bronze badges

Comments

Mauriel · Accepted Answer · 2014-05-19 22:22:59Z

0

This should make it work in both cases

function onDateChange() {
   // Do something here
}

$('#dpd1').bind('changeDate', onDateChange);
$('#dpd1').bind('input', onDateChange);

answered May 19, 2014 at 22:22

Mauriel

364 bronze badges

Comments

Ben in CA · Accepted Answer · 2019-04-25 17:06:14Z

0

Depending which date picker for Bootstrap you're using, this is a known bug currently with this one:

Code: https://github.com/uxsolutions/bootstrap-datepicker

(Docs: https://bootstrap-datepicker.readthedocs.io/en/latest/)

Here's a bug report:

https://github.com/uxsolutions/bootstrap-datepicker/issues/1957

If anyone has a solution/workaround for this one, would be great if you'd include it.

answered Apr 25, 2019 at 17:06

Ben in CA

89916 silver badges26 bronze badges

Comments

akire · Accepted Answer · 2019-06-20 21:14:48Z

0

I have this version about datetimepicker https://tempusdominus.github.io/bootstrap-4/ and for any reason doesn`t work the change event with jquery but with JS vanilla it does

I figure out like this

document.getElementById('date').onchange = function(){ ...the jquery code...}

I hope work for you

answered Jun 20, 2019 at 21:14

akire

615 bronze badges

Comments

Andy Raddatz · Accepted Answer · 2020-04-22 22:00:43Z

I was using AngularJS and AngularStrap 2.3.7 and trying to catch the 'change' event by listening to a <form> element (not the input itself) and none of the answers here worked for me. I tried to do:

$(form).on('change change.dp dp.change changeDate' function () {...})

And nothing would fire. I ended up listening to the focus and blur events and setting a custom property before/after on the element itself:

// special hack to make bs-datepickers fire change events
// use timeout to make sure they all exist first
$timeout(function () {  
    $('input[bs-datepicker]').on('focus', function (e){
        e.currentTarget.focusValue = e.currentTarget.value;
    });        
    $('input[bs-datepicker]').on('blur', function (e){
        if (e.currentTarget.focusValue !== e.currentTarget.value) {
            var event = new Event('change', { bubbles: true });
            e.currentTarget.dispatchEvent(event);
        }
    });
})

This basically manually checks the value before and after the focus and blur and dispatches a new 'change' event. The { bubbles: true } bit is what got the form to detect the change. If you have any datepicker elements inside of an ng-if you'll need to wrap the listeners in a $timeout to make sure the digest happens first so all of your datepicker elements exist.

Hope this helps someone!

Limitless isa · Accepted Answer · 2021-08-30 18:24:34Z

0

if($('.single_datetime').length){
        $('.single_datetime').dateRangePicker({ format: 'DD.MM.YYYY HH:mm', language: 'tr', autoClose: true, singleDate : true, showShortcuts: false, time: {enabled: true}
        }).bind('datepicker-change',function(event,obj){caclDay();});
    }

Ref: https://www.chamonix-property.com/bower_components/jquery-date-range-picker/

answered Aug 30, 2021 at 18:24

Limitless isa

3,82238 silver badges29 bronze badges

Collectives™ on Stack Overflow

bootstrap datepicker change date event doesnt fire up when manually editing dates or clearing date

11 Answers 11

6 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Depending which date picker for Bootstrap you're using, this is a known bug currently with this one:

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

6 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Depending which date picker for Bootstrap you're using, this is a known bug currently with this one:

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related