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: angular-ui.github.io/bootstrap — Fals
– Fals, Commented Jun 12, 2015 at 13:13

honerlawd · Accepted Answer · 2015-06-12 13:13:27Z

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, 2015 at 13:13

honerlawd

1,50911 silver badges10 bronze badges

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

6 Comments

Fals Over a year ago

bad idea mix jquery with angular. He should just use some directive that does the job.

honerlawd Over a year ago

@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.

Vinith Venkatesan Over a year ago

why is it a bad idea to use both together?

honerlawd Over a year ago

stackoverflow.com/questions/24830498/… gives an okay insight as to why.

Pankaj Parkar Over a year ago

@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 stackoverflow.com/questions/28808502/…

|

Louis Novick · Accepted Answer · 2015-06-12 13:56:03Z

0

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 }}

answered Jun 12, 2015 at 13:56

Louis Novick

365 bronze badges

Collectives™ on Stack Overflow

AngularJS- Text is not binding with Jquery time picker

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related