HAraTest HAraTest - 2 months ago 12
AngularJS Question

DateField in AngularJS

I started to write an example using custom filter, date filter and ng-repeat. Its basically a date property as a part of my model.

<!DOC TYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">
</script>
<script>
var customfilter= angular.module("filterapp",[])
customfilter.controller("filterctrl",function($scope){
$scope.jdate= new Date();
$scope.tabledata=[
{numbers:1,
firstName:"Eve",
lastName:"Jackson",
salary:45000,
jdate:'23/04/2013'
},

{numbers:2,
firstName:"John",
lastName:"Doe",
salary:55000,
jdate:'22/02/2010'}];

});
customfilter.filter("taxcalc",function(){
return function(salary){
if(salary > 50000)
{
tax= salary * (20/100);
}
else if(salary > 40000)
{

tax = salary * (10/100);
}

else{

tax= salary * (5/100);
}
return tax;
}
});
</script>
</head>
<body ng-app="filterapp">
<div ng-controller="filterctrl">
<table>
<thead>
<th>numbers</th>
<th>firstname</th>
<th>lastname</th>
<th>salary</th>
<th>joiningdate</th>
<th>tax</th>
</thead>
<tbody>
<tr ng-repeat="arraydata in tabledata">
<td>{{arraydata.numbers}}</td>
<td>{{arraydata.firstName}}</td>
<td>{{arraydata.lastName}}</td>
<td>{{arraydata.salary}}</td>
<td>{{arraydata.jdate| date: 'shortDate'}}</td>
<td>{{arraydata.salary | taxcalc}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Answer

Your date, should be date object and not a string. Instead of jdate: '23/04/2013' try jdate: new Date('23/04/2013')

Note: If you are getting invalid date error, you might have to flip day and month like jdate: new Date('04/23/2013')

You can also remove $scope.jdate= new Date(); since its not used anywhere.