Datepicker does not bind to Angular Model

0
votes

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 :)

2
angularjsdatepickerangular-ngmodel
plunker link would be appreciated – ngCoder

2 Answers

1
votes

You should sync scope after datepicker change via

$scope.$apply();

or

$scope.$evalAsync();

seems it 'apply.daterangepicker' event for your datepicker

0
votes

I tried all the methods mentioned in different answers. My colleagues told that it's a bad idea to use $scope.$evalAsync() or $scope.$apply() unnecessarily. Our code base does not use digest, compile and the likes. So that was causing a hindrance.

I finally decided to detect the date change event as suggested by Valery Kozlov (the accepted answer) and manually changing the model.

I accessed the date like this.

$('#frompicker').val(); // can be done without jQuery as well

Changed the model using this.

// use Angular's $on to make things consistent if needed

$('#frompicker').on('apply.daterangepicker', function(ev, picker) {
    scope.vm.from_date = $('#frompicker').val();                
});