CODEWITHSUNDEEP
angularjshtml
Jack Malkovich
Jack Malkovich

Reputation: 806

HTML5 AngularJS Input Date Not Binding

Trying to bind date to input, but it is not binding:

<body ng-app>    
<div ng-controller="MainCtrl">
    <input type="date" ng-model="dateString"/>     
    <br/>{{ dateString }}
     <br/><input type="date" ng-model="date1"/>    
    <br/>{{ date1 }}
</div>
</body>

function MainCtrl($scope, dateFilter) {
    $scope.dateString = "2015-08-11T00:00:00";
    $scope.date1 = new Date("2015-08-11");
}

http://jsfiddle.net/47fLdefo/

What am i doing wrong?

Upvotes: 1

Views: 3278

Answers (2)

Atish Kumar Dipongkor
Atish Kumar Dipongkor

Reputation: 10422

Your jsfiddle contains error. You forgot to define module. see here. It is working. Another thing you can not bind a string to a date. string has to be converted into date before binding by new Date(yourDateString).

$scope.dateString = "2015-08-11T00:00:00";

Above should be changed by following

$scope.dateString = new Date("2015-08-11T00:00:00");

Edit: I did not notice that your angular version is 1.0.2. input type date is not there. Try to upgrade your angular.

See date is not binding in 1.0.2

Upvotes: 3

ste2425
ste2425

Reputation: 4766

I feel a few things need clarifying as the other answers have glossed over it. The issue is not directly module definition (whilst that is an issue in itself).

The issue is support for using inputs with a type of date was not added until v1.3 according to this source however your using v1.0.2.

If you want to use inputs with the native date picker you will need to upgrade your version of Angular.

Also using a type of date the model value must be a date object not a string representation according the the docs: https://docs.angularjs.org/api/ng/input/input%5Bdate%5D

There are other options if you can't upgrade such as BootStraps date picker however.

Upvotes: 1

Related Questions