Question

我正在制作日历。问题是我第一次加载时没有显示日期。如果我去下个月并再次回到上个月，那么日期显示并且工作正常。假设，当前月份为10月，因此当您加载页面时，将显示仅当前月份10月。无日期。现在点击右箭头去11月，然后点击左箭头再回到10月。日期将显示。请检查我的小提琴和代码： -

＆＃13;

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

＆＃13;

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

Answer 1

您可以使用ng-init来调用changeMonth函数。

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

或者您可以在设置月份来设置$ scope.dateValues变量时在控制器中调用它。无论哪种方式，都需要初始化此变量，因为它不是您当前的代码。

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

工作小提琴：https://jsfiddle.net/enkode/89sbv65e/

Answer 2

看看这个：

＆＃13;

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

＆＃13;

<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>

＆＃13;

第一次加载Javascript AngularJS时没有显示日期

2 个答案: