Model is not updating after select a date

Question

The following code work with pure angularjs correct, but when I integrate it to a Mobile Angular UI App it does not update the model after selecting a date. If I edit the input field without the date picker it works fine.

Template:

<div>
<label>{{myLabel}}:</label>
<input class="form-control datetime-picker" placeholder="{{myPlaceholder}}" ng-model="ngModel" required="required">
</div>

Directive js code:

(function(){
    var app = angular.module('MeetingApp.directives.HelpDirective', []);

    app.directive("datetimePicker", function() {
        return {
            restrict: 'E',
            templateUrl: "datetime-picker.html",
            scope: {
                ngModel: '=',
                myPlaceholder: '@',
                myLabel: '@'
            },
            require: ['?^ngModel'],
            link: function(scope, element, attrs, ngModelCtrl) {
                $(element).find('.datetime-picker').datetimepicker({
                    format: "dd.mm.yyyy hh:ii",
                    autoclose: true,
                    language: "de",
                    startDate: new Date(),
                    minuteStep: 10
                });
            }
        };
    });
})();

Usage:

<form method="post" id="meetingForm" ng-controller="MeetingController as meetingCtrl" novalidate>    
    <datetime-picker my-placeholder="Startzeit" my-label="Startzeit" ng-model="meetingCtrl.meeting.start"></datetime-picker>
    <datetime-picker my-placeholder="Endzeit" my-label="Endzeit" ng-model="meetingCtrl.meeting.end"></datetime-picker>
</form>

Github link: https://github.com/knobli/meetingApp

To run the app: npm install -g bower yo gulp generator-mobileangularui bower install gulp build gulp

@pankajparkar the element is a div element containing the label and input element. — knobli, May 25 '15 at 08:53
do try `$(element).find('.datetime-picker').datetimepicker` looks like everytime you are initializing datepicker for all the element which has `datetime-picker` class — Pankaj Parkar, May 25 '15 at 08:56
@pankajparkar thanks that works, but it does not solve the problem — knobli, May 25 '15 at 09:05

score 1 · Answer 1 · edited May 23 '17 at 12:21

1

Whenever you are using any jQuery plugin you need to update your scope bindings manually, because any changes from outside angular context would not run angular digest cycle.

For updating ng-model on change of input you need to update an ng-model on its change event dp.change.

Directive

app.directive("datetimePicker", function() {
    return {
        restrict: 'E',
        templateUrl: "datetime-picker.html",
        scope: {
            ngModel: '=',
            myPlaceholder: '@',
            myLabel: '@'
        },
        require: ['?^ngModel'],
        link: function(scope, element, attrs, ngModelCtrl) {
            var dpElement = $(element).find('.datetime-picker');
            dpElement.datetimepicker({
                format: "dd.mm.yyyy hh:ii",
                autoclose: true,
                language: "de",
                startDate: new Date(),
                minuteStep: 10
            });
            dpElement.on('dp.change', function(event) {
                //need to run digest cycle for applying bindings
                scope.$apply(function() {
                    ngModelCtrl.$setViewValue(event.date);
                });
            });
        }
    };
});

Similar SO Answer Here with detailed explanation.

edited May 23 '17 at 12:21

Community

1
1

answered May 25 '15 at 09:28

Pankaj Parkar

134,766
23
234
299

It does not work, but I read already other posts about this jquery update behaviour. I provide a github link with all the dependencies. – knobli May 25 '15 at 09:35
@knobli does your code has problem only with mobile? or chrome is also showing same issue? – Pankaj Parkar May 25 '15 at 09:37
@knobli could you please create a plunkr/fiddle – Pankaj Parkar May 25 '15 at 11:43
There are a lot of dependencies, as I said with native angularjs it works. Couldn't you work with the github link? There you have the bower file with all the dependencies. – knobli May 25 '15 at 11:56
@knobli do you required more help on this? – Pankaj Parkar May 26 '15 at 18:31

tBX · Accepted Answer · 2015-05-26T18:35:28.933

1

This require: ['?^ngModel'], looks strange to me... If you require a thing, in my opinion, it can't be optional, right?

Try using require: 'ngModel', and let me know if it works.

You need to use this:

dpElement.on('changeDate', function(ev) {
            //need to run digest cycle for applying bindings
            scope.$apply(function() {
                ngModelCtrl.$setViewValue(ev.date);
            });
        });

But be aware to not call your parameter event. This is a reserved word in JavaScript. Take a look at W3Schools

edited May 26 '15 at 18:35

answered May 26 '15 at 18:20

tBX

174
1
10

Thanks, the three changes (require, event name, parameter name) did the job. – knobli May 26 '15 at 18:40

Model is not updating after select a date

2 Answers2