Question

我正在设计日历。这将显示当前月份到下个月12个月。此外，当前月份的当前日期。假设，今天是10月20日，它将显示10月20日至10月31日。现在，如果我通过点击右箭头选择11月，那么它应该从11月1日开始显示，因为这是未来的日期。不应显示过去的日期。它已经准备好了。但是，当我第一次加载页面时，它会显示当前日期的所有接下来的365天，这是因为限制366.我想要替换它。现在，如果我去11月再回到10月，那么10月从10月1日开始，但它应该从10月20日开始，那是当前日期。请检查代码和小提琴。

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));
            }

		},


	}
}]);

小提琴链接： - https://jsfiddle.net/abhijitloco/fxbmpetu/13/

Answer 1

首先，我建议您重构代码，将操纵dateValues的逻辑移动到dateValues所在的服务中。这可能是为什么调试发生的事情非常困难，因为你的控制器从服务构建了dateValues，但是当月份从控制器发生变化时重建它们。但是，我会把它留给你。

在这种情况下，快速解决方法是在monthIndex再次变为零时重新初始化。

$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")}
};

查看您的更新小提琴here。

日期选择日历Javascript AngularJS

1 个答案: