Search code examples
angularjsdatepickerangular-ngmodel

Datepicker does not bind to Angular Model

I've made a date picker directive that uses a single date picker from the improvely datepicker library. It has two input tags and an OK button.

Date Picker Library

Single Date Picker Example

If I change the value of the input field via the keyboard the models get the desired value and calls to the server take place as expected. The problem arises when I use the date picker. The value of the model does not change. It still has the same value that I set via the keyboard.

But if I run document.getElementById('frompicker').value using the console it shows me the right date that I set using the datepicker.

If I don't set any value form the keyboard and only use the datepicker drop down, the values of the models are undefined.

I've tried a few solutions offered for Angular Boostrap UI Datepicker and Angular UI Datepicker. None of them work.

Edit after a comment

Code can be found here - https://plnkr.co/edit/HzkYzUajGlsZq5KhUwsx

Any help is greatly appreciated :)

Solution

  • You should sync scope after datepicker change via

    $scope.$apply();

    or

    $scope.$evalAsync();

    seems it 'apply.daterangepicker' event for your datepicker