Display next 5 days Dates in AngularJS

Last Reply one month ago By dharmendr

Posted one month ago

Hi,

I have one field Date

currently my requirement is that after loading of page need to display next 5 days dates

my expected o/p

Date

14/2/2019

15/2/2019

16/2/2019

17/2/2019

18/2/2019

Posted one month ago

Hi mahesh213,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $http, $window, $filter) {
            var currentDate = new Date();
            var newDate = new Date(currentDate.setDate(currentDate.getDate() - 1));
            $scope.Details = [];
            for (var i = 0; i < 5; i++) {
                $scope.Details.push({ Date: $filter('date')(new Date(newDate.setDate(newDate.getDate() + 1)), "dd/MM/yyyy") });
            }
        });
    </script>
</head>
<body>
    <body ng-app="MyApp" ng-controller="MyController">
        <table id="tblOrders" class="table table-responsive">
            <tr><th>Date</th></tr>
            <tbody ng-repeat="detail in Details">
                <tr><td>{{detail.Date}}</td></tr>
            </tbody>
        </table>
    </body>
</body>
</html>

Demo