Vishal Vishal - 1 year ago 60
AngularJS Question

How to store dates in json format and display them one by one for a given range?

I am new to angularjs and I am trying to store dates in a json format and display it in a list wise manner.

Here,I want the minDate to be the date which the user gives and the maxDate to be the current date.

I want to display dates from the minDate to maxDate through a 'for' loop in which dates are incremented by 1,do we need a function to calculate the no. of days also?


<div ng-app='myApp' ng-controller="Main">
<input type="date" ng-model="min">
<li ng-repeat="n in range(min,max)">{{ | date}}</li>


myApp.controller('Main', function ($scope){
$scope.max = new Date();
$ = [];
$scope.range = function(min, max){
for (var i = min; i <= max; i ++) {
date.setDate(date.getDate() + i);
dt: $
return date;

Output should be like

Date 1:
Date 2:

Day difference = n
Day 1=20 July.2016

Day 2=21 July.2016

Day 3=22 July.2016

Day 4=23 July.2016

Day 5=24 July.2016

Answer Source

I would not use a function in ng-repeat because it will be called with each digest cycle. Instead, only call the function when your min date has changed. So here's how it would look:


myApp.controller('Main', function($scope) {
  $scope.min = new Date();
  $scope.max = new Date();
  $scope.dateRange = [];

  $scope.getDateRange = function() {
    $scope.dateRange = [{
      dt: angular.copy($scope.min)

    for (var thisDate = $scope.min; thisDate < $scope.max;) {
      thisDate.setDate(thisDate.getDate() + 1);

        dt: angular.copy(thisDate)


<div ng-controller="Main">
  <input type="date" ng-model="min" ng-change="getDateRange()">
  <li ng-repeat="d in dateRange">{{ d.dt | date}}</li>

You can see it working here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download