Updating date in controller not reflected in input type=date

Question

In AngularJS, I have on the DOM side:

<input class="form-control"  type="date" ng-model="scope.status.date"
       ng-change="scope.reloadDay()" ng-model-options="{debounce:200}">

In the back I have a function:

scope.changeDate = function() {
    var current_date   = scope.status.date;
    current_date.setDate(current_date.getDate() - 1);
    scope.status['date'] = current_date;
}

This results that indeed scope.status.date is updated, but in the input box it stays the same.

What is happening here?

Please show the exact value of scope.status.date – Alexander Staroselsky Sep 18 '19 at 16:50 — Alexander Staroselsky, Sep 18 '19 at 16:50
after modify you need pars in date object. – Pankaj Rupapara Sep 19 '19 at 00:43 — Pankaj Rupapara, Sep 19 '19 at 00:43

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Construct a new Date:

$scope.changeDate = function() {
    var current_date = $scope.status.date;
    current_date.setDate(current_date.getDate() - 1);
    $scope.status.date = new Date(current_date);
};

This will trigger the $render() function of the ngModelController.

The DEMO

angular.module("app",[])
.controller("ctrl", function($scope) {
    $scope.status = {date: new Date()};

    $scope.changeDate = function() {
        var current_date = $scope.status.date;
        current_date.setDate(current_date.getDate() - 1);
        $scope.status.date = new Date(current_date);
    };
})

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
     <input class="form-control"  type="date" ng-model="status.date"
            ng-model-options="{debounce:200}">
     <br>
     <button ng-click="changeDate()">Change Date</button>

</body>

Would have never thought of this that this triggers the render(). May I ask how you found this in the documentations? What did you look for?

From the Docs:

$render();

Since ng-model does not do a deep watch, $render() is only invoked if the values of $modelValue and $viewValue are actually different from their previous values. If $modelValue or $viewValue are objects (rather than a string or number) then $render() will not be invoked if you only change a property on the objects.

— AngularJS ngModelController API Reference - $render

For more information, see

Interesting! Would have never thought of this that this triggers the render(). May I ask how you found this in the documentations? What did you look for? — WJA, Sep 19 '19 at 07:47

Raj · Answer 2 · 2019-09-18T19:07:33.813

-1

Please check a date format, date format should be "yyyy-mm-dd"

edited Sep 18 '19 at 19:07

answered Sep 18 '19 at 17:08

Raj

39
5

`ng-model` binds the value to inputs, `value` attribute not needed – Bill P Sep 18 '19 at 19:01
yes you are right now I have updated my answer and can you check your date format because HTML 5 accept yyyy-mm-dd format.@Bill p – Raj Sep 18 '19 at 19:09

Updating date in controller not reflected in input type=date

2 Answers2

The DEMO

`$render();`