Date object in Angular

Question

Can someone explain why the input with ng-model in this plunk is not updated when the button is pressed?

http://plnkr.co/edit/8JpyUVM8dY8aoV4fi5hC?p=preview

HTML

  <body ng-controller="MainCtrl">
    Using ng-model:  <input type="text" ng-model="myDate"><br/>
    Using expression: {{ myDate  }}<br/>
    <button ng-click="nextDay()">Next Day</button>
  </body>

JS

app.controller('MainCtrl', function($scope) {
  $scope.myDate = new Date();
  $scope.nextDay = function(){
    $scope.myDate.setDate($scope.myDate.getDate() + 1);
  };
});

score 4 · Accepted Answer · answered May 27 '15 at 19:19

Working Plunker: http://plnkr.co/edit/ku8iy0YKvQfBdolg7cug?p=preview

Change your controller to:

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

app.controller('MainCtrl', function($scope) {
  $scope.myDate = new Date();
  $scope.nextDay = function(){
     var newDate = new Date($scope.myDate.setDate($scope.myDate.getDate() + 1));
     $scope.myDate = newDate;
  };
});

Like others mentioned, the reference to the instance hasn't changed so Angular doesn't know it needs to render it again. By changing the Date object entirely you are forcing Angular to render the changed model.

score 0 · Answer 2 · answered May 27 '15 at 18:46

Instead of updating the date with the setDate method, set a new value to the $scope.myDate object with a locally created version of your updated date.

$scope.myDate.setDate($scope.myDate.getDate() + 1);

becomes

var newDate = new Date();
newDate.setDate($scope.myDate.getDate() + 1);
$scope.myDate = newDate;

score 0 · Answer 3 · answered May 27 '15 at 18:47

Since input takes a string, toString() is implicly called on myDate. Do this instead:

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

app.controller('MainCtrl', function($scope) {
  $scope.myDate = new Date();
  $scope.myDateStr = $scope.myDate.toString();
  $scope.nextDay = function(){
    $scope.myDate.setDate($scope.myDate.getDate() + 1);
    $scope.myDateStr = $scope.myDate.toString();
  };
});

In your HTML:

<input type="text" ng-model="myDateStr">

sirrocco · Answer 4 · 2015-05-27T19:14:35.237

0

So what happens is that angularjs maintains a reference watch of the date object you set initially. Using the setDate method doesn't change the reference so angular doesn't know it changed.

That's why:

var newDate = new Date();
newDate.setDate($scope.myDate.getDate() + 1);
$scope.myDate = newDate;

Works.

edited May 27 '15 at 19:14

answered May 27 '15 at 18:53

sirrocco

7,975
4
59
81

score -2 · Answer 5 · edited May 23 '17 at 12:24

-2

real answer you can find here. You can't use ng-model with <input/>. Off course you can find a lot of alternatives like binding with {{}}.

@Marc Actually ng-bind binds the text content of the element, not its value. Because of this, it can't be used in elements

edited May 23 '17 at 12:24

Community

1
1

answered May 27 '15 at 18:53

Kosta

463
4
7

Date object in Angular

5 Answers5