bootstrap-datepicker does not update AngularJS model when picking date

Question

I am using AngularJS with this bootstrap-datepicker plugin:

Datepicker for Bootstrap v1.6.4 (https://github.com/eternicode/bootstrap-datepicker)

Copyright 2012 Stefan Petre

Improvements by Andrew Rowls

I have it bound like this:

<input type="text" data-provide="datepicker" ng-model="obj.FirstDate" />

I get the values to inputs using ng-model.

When I type the date into this field using keyboard it all works OK, but when I click on a field and select a date from the Datepicker:

the model doesn't get updated,
the field is not treated as dirty (no ng-dirty class).

Is there a way to tell Angular to update value of obj.FirstDate when using the Datepicker? For example to attach it to an event? Or any other way that this would work?

I have a few of these fields so I don't want to write the script which attaches to a field using its id. Any help appreciated.

Community · Accepted Answer · 2017-05-23 12:33:37Z

3

After much time of struggling with this I was forced to use below code to fix every of my datepicker instances at once:

function fixDatepickerTriggerChange() {
    $(document).ready(function () {
        $('[data-provide="datepicker"]').datepicker().on('changeDate', function (e) {
            angular.element($(this)).triggerHandler('input');
        });
    });
}

And run it from within the angular.controller.

Based on this answer: https://stackoverflow.com/a/23850753/1813219.

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Jan 23, 2017 at 21:06

Mariusz Ignatowicz

1,6923 gold badges22 silver badges46 bronze badges

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

Collectives™ on Stack Overflow

bootstrap-datepicker does not update AngularJS model when picking date

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related