AngularJS- Text is not binding with Jquery time picker

Question

I have this simple piece of Angular Code which displays the selected time. But the date selected is not binding with the text area. As an alternative I used HTML5 datetime-local input which worked properly. It's the jQuery timepicker which is not working.

<!DOCTYPE html>
<html lang="en" data-framework="angularjs">

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>

<body ng-app="myApp">
    <div ng-controller="myCtrl">
        <input type="text" id="dates" ng-model="tdata">
        <text>{{tdata}}</text>
    </div>
</body>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $("#dates").datepicker({
        changeMonth: true,
        changeYear: true
    });
})
</script>

</html>

Never ever use jquery with angular. You should use Angular UI for this: https://angular-ui.github.io/bootstrap/ — Fals, Jun 12 '15 at 13:13

score 1 · Accepted Answer · answered Jun 12 '15 at 13:13

1

For some reason the model is not being updated when you change the value of the field (however, if you type into the field then it will update accordingly). The only reason I can think of this is that the way datepicker works is that it does not send out an event when the field is changed (so it just updates the value of the field and no event is fired).

In order to fix this you can add onSelect to the datepicker and manually update the tdata field like so...

app.controller('myCtrl',function($scope) {

 $scope.tdata = '';
    
 $("#dates").datepicker({
     changeMonth: true,
        changeYear: true, 
        onSelect: function(data) {
         $scope.$apply(function() {
             $scope.tdata = data;
         });
     }
    });
})

answered Jun 12 '15 at 13:13

honerlawd

1,499
11
10

2

bad idea mix jquery with angular. He should just use some directive that does the job. – Fals Jun 12 '15 at 13:16
@Fals Yes it is a bad idea but I answered the question he had. I didn't just complain that he shouldn't do it that way. – honerlawd Jun 12 '15 at 13:28
why is it a bad idea to use both together? – Vinith Venkatesan Jun 12 '15 at 13:39
http://stackoverflow.com/questions/24830498/angular-and-mixing-jquery-ui-why-not gives an okay insight as to why. – honerlawd Jun 12 '15 at 13:44
@VinithVenkatesan its like doing anti-pattern in angular..Its not the way angular does..do look at this answer..you should do it using directive http://stackoverflow.com/questions/28808502/how-to-make-a-directive-update-ng-model-on-jquery-on-event – Pankaj Parkar Jun 12 '15 at 13:54
Oh, got a decent idea why not to use both. If i had made a new directive, the digest cycle problem might not have occurred and it's reusable. Thanks a lot guys. – Vinith Venkatesan Jun 12 '15 at 13:59

score 0 · Answer 2 · answered Jun 12 '15 at 13:56

Try a directive. Check out this fiddle.

http://jsfiddle.net/louisnovick/upj137e3/

var datePicker = angular.module('app', []);

datePicker.directive('jqdatepicker', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
         link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker({
                dateFormat: 'DD, d  MM, yy',
                onSelect: function (date) {
                    scope.date = date;
                    scope.$apply();
                }
            });
        }
    };
});

Your Html should be

<input type="text" ng-model="date" jqdatepicker />
<br/>
{{ date }}

AngularJS- Text is not binding with Jquery time picker

2 Answers2