Date is not showing at first time load Javascript AngularJS

Question

I am building a calendar. Problem is when I load the first time then dates are not showing. If I go to next month and the come back again to previous month then dates are showing and working fine. Suppose, present month is Oct, so when you load the page then Only current month Oct will be shown. No date. Now go to Nov by clicking on right arrow and come back again on Oct by clicking on left arrow. Date will be shown. Please check my fiddle and code :-

datepicker = angular.module('datepicker', []);

datepicker.controller('dateTimePicker', ['$scope', function($scope){
 console.log('alive');
        
  var date = new Date();
  var months = [],
    monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
      "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
    ];
  for (var i = 0; i <= 12; i++) {
    months.push(monthNames[date.getMonth()] + ' ' + date.getFullYear());
    date.setMonth(date.getMonth() + 1);
  }
  $scope.year =2015;

  $scope.changeMonth = function(steps) {
    if ($scope.monthIndex + steps >= 0 &&
      $scope.monthIndex + steps <= 12
    ) {
      $scope.dateValues = [];
      $scope.monthIndex = $scope.monthIndex + steps;
      $scope.monthName = $scope.months[$scope.monthIndex];
       var date = new Date();
        console.log(date.getMonth());
        var offset = date.getMonth()
       console.log($scope.monthIndex);
        var offsetDate = offset + $scope.monthIndex;
      $scope.nDays = new Date( $scope.year,  offsetDate+1, 0).getDate();
        console.log(offsetDate+1);
        console.log(new Date( $scope.year, offsetDate, 1));
      for (i = 1; i <= $scope.nDays; i++) {  
     var d = new Date();
     $scope.dateValues.push(new Date($scope.year,  offsetDate, i));
     }
      
    }else{console.log("missed")}
  };

  $scope.monthIndex = 0;
  $scope.months = months;
  $scope.monthName = months[0];
 

}]);

fiddle link :- https://jsfiddle.net/abhijitloco/fxbmpetu/15/

Enkode · Accepted Answer · 2015-10-19T23:30:46.033

1

You could use ng-init to call your changeMonth function.

<body ng-controller="dateTimePicker" ng-init="changeMonth(0)">

Or you could call it within your controller at the end when you setup month to setup your $scope.dateValues variable. Either way this variable needs to be initialized as it is not with your current code.

  $scope.monthIndex = 0;
  $scope.months = months;
  $scope.monthName = months[0];
  $scope.changeMonth(0);

Working fiddle: https://jsfiddle.net/enkode/89sbv65e/

edited Oct 19 '15 at 23:30

answered Oct 19 '15 at 23:24

Enkode

4,515
4
35
50

Hi, I have attached the fiddle link. Can you please update it there. – cyberoy Oct 19 '15 at 23:30
Yeah, but onload. It is starting from Oct 2016. Please check again. – cyberoy Oct 19 '15 at 23:32
Fixed, had both ng-init and controller calling to test both for you. https://jsfiddle.net/enkode/89sbv65e/ – Enkode Oct 19 '15 at 23:38
I have another question. If you can help, it would be great. I want to count the dates of current month from current date. Suppose, in Oct 2015, it should start from 20th Oct to 31th Oct. I know it is not related to this question. Still if you can try. Thanks. – cyberoy Oct 20 '15 at 00:00
You should look into moment.js for more datetime functions. https://github.com/urish/angular-moment that utility has plenty of date time functions. http://stackoverflow.com/questions/26131003/moment-js-start-and-end-of-given-month – Enkode Oct 20 '15 at 01:23

score 0 · Answer 2 · answered Oct 19 '15 at 23:41

Look this:

datepicker = angular.module('datepicker', []);

datepicker.controller('dateTimePicker', ['$scope', function($scope){
    var date = new Date();
    var months = [],
        monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
    ];
    
    $scope.year = 2015;

    $scope.changeMonth = function(steps) {
        if ($scope.monthIndex + steps >= 0 &&
            $scope.monthIndex + steps <= 12
        ) {
            $scope.dateValues = [];
            $scope.monthIndex = $scope.monthIndex + steps;
            $scope.monthName = $scope.months[$scope.monthIndex];
            var date = new Date();
            var offset = date.getMonth();
            var offsetDate = offset + $scope.monthIndex;
            $scope.nDays = new Date( $scope.year,  offsetDate+1, 0).getDate();

            for (i = 1; i <= $scope.nDays; i++) {
                var d = new Date();
                $scope.dateValues.push(new Date($scope.year,  offsetDate, i));
            }

        }else{
            console.log("missed");
        }
    };

    $scope.init = function(){
      for (var i = 0; i <= 12; i++) {
            months.push(monthNames[date.getMonth()] + ' ' + date.getFullYear());
            date.setMonth(date.getMonth() + 1);
        }
        $scope.monthIndex = 0;
        $scope.months = months;
        $scope.monthName = months[0];
      console.log(months);
        $scope.changeMonth(0);
    };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


  <div class="container col-md-3" ng-app="datepicker" ng-controller="dateTimePicker" ng-init="init()">
    <div class="col-md-12" style="background-color:ff6600;">
      <input type="image" src="http://s15.postimg.org/utzsj55ev/icon_ios7_arrow_right_128.png" style="float:right;" ng-click="changeMonth(1);" />
      <input type="image" src="http://s7.postimg.org/mwp7xtpg7/icon_ios7_arrow_left_128.png" ng-click="changeMonth(-1);" />
      <h3 style="text-align:center;"> {{monthName}} </h3> 
    </div>
    <div class="frame col-md-12">
      <ul class="datepicker text-center" ng-if="true">
        <li ng-repeat="date in dateValues">{{date | date:'EEE dd'}}</li>
        <!-- ng-repeat on this one to show all available dates -->

      </ul>
    </div>
  </div>

Date is not showing at first time load Javascript AngularJS

2 Answers2