CODEWITHSUNDEEP
javascripthtmlangularjs
HAraTest
HAraTest

Reputation: 5

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>

Upvotes: 0

Views: 53

Answers (1)

topless
topless

Reputation: 8221

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.

Upvotes: 2

Related Questions