Date picking calendar Javascript AngularJS

Question

I am designing a calendar. Which will show the current month to next 12 month. Also, current date of current month to last date. Suppose, today is Oct 20 so, it will show Oct 20 to Oct 31. Now, if I select Nov by clicking on right arrow, then it should show from Nov 1, because this is future date. Past date should not be shown. It is ready already. But, when I am loading the page for first time, then it is showing all the next 365 days from current date, that is because of limit 366. I want to replace it. Now, if I go to Nov and back to Oct again then Oct is starting from Oct 01, but it should start from Oct 20, that is current date. Please check the code and fiddle.

 datepicker = angular.module('datepicker', []); datepicker.controller('dateTimePicker', ['$scope', 'formatDateTime', function($scope, formatDateTime){ console.log('alive'); var getDateValues = function() { formatDateTime.getDateValues(); } getDateValues(); var bindScope = function() { $scope.dateValues = formatDateTime.dateValues; } bindScope(); 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]; }]); datepicker.factory('formatDateTime', [function(){ return { //final structures which are bound to view // dateValues: [], //intermediate structures // getDateValues: function() { var dateValues = this.dateValues; for (i = 0; i <= 366; i++) { var d = new Date(); dateValues.push(d.setDate(d.getDate() + i)); } }, } }]); 

Fiddle link :- https://jsfiddle.net/abhijitloco/fxbmpetu/13/

Answer 1

At first I would suggest a refactor of your code to move the logic that manipulates the dateValues into the service where dateValues lives. This is probably why it is pretty difficult to debug what's happening, given that your controller builds the dateValues from the service, but then rebuilds them when the month changes from the controller. However, I will leave that to you.

A quick fix in this case is to reinitialize when your monthIndex becomes zero again.

$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];

    // if your new index is zero, just reinitialize the dateValues
    if ($scope.monthIndex === 0) {
      bindScope();
    } else { // otherwise...
      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")}
};

See your update fiddle here .