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-19 23:30:46Z

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, 2015 at 23:30

answered Oct 19, 2015 at 23:24

Enkode

4,8634 gold badges40 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

cyberoy Over a year ago

Hi, I have attached the fiddle link. Can you please update it there.

cyberoy Over a year ago

Yeah, but onload. It is starting from Oct 2016. Please check again.

Enkode Over a year ago

Fixed, had both ng-init and controller calling to test both for you. jsfiddle.net/enkode/89sbv65e

cyberoy Over a year ago

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.

Enkode Over a year ago

You should look into moment.js for more datetime functions. github.com/urish/angular-moment that utility has plenty of date time functions. stackoverflow.com/questions/26131003/…

Emir Marques · Accepted Answer · 2015-10-19 23:41:05Z

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>

Collectives™ on Stack Overflow

Date is not showing at first time load Javascript AngularJS

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related