Дата не отображается при первой загрузке Javascript AngularJS

Я создаю календарь. Проблема заключается в том, что я загружаю первый раз, тогда даты не отображаются. Если я перейду в следующий месяц и вернусь к предыдущему месяцу, то даты покажутся и работают нормально. Предположим, что текущий месяц - октябрь, поэтому, когда вы загружаете страницу, будет показан только текущий месяц октября. Без даты. Теперь перейдите в Ноябрь, нажав на стрелку вправо и вернитесь снова в октябре, нажав на стрелку влево. Будет показана дата. Пожалуйста, проверьте мою скрипку и код: -Дата не отображается при первой загрузке Javascript AngularJS

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

 
datepicker.controller('dateTimePicker', ['$scope', function($scope){ 
 
\t 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++) { 
 
    \t var d = new Date(); 
 
    \t $scope.dateValues.push(new Date($scope.year, offsetDate, i)); 
 
    \t } 
 
     
 
    }else{console.log("missed")} 
 
    }; 
 

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

 
}]);

скрипку ссылка: - https://jsfiddle.net/abhijitloco/fxbmpetu/15/

источник

2015-10-19 cyberoy

Вы можете использовать нг-инициализацию для вызова функции 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/

источник

2015-10-19 23:24:44 Enkode

Привет, Я приложил скрипку ссылку. Не могли бы вы обновить его там. – cyberoy

Просто добавлена ссылка jsfiddle. https://jsfiddle.net/enkode/89sbv65e/ – Enkode

Да, но загружайте. Он начинается с октября 2016 года. Повторите попытку. – cyberoy

Посмотрите это:

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>

источник

2015-10-19 23:41:05

Дата не отображается при первой загрузке Javascript AngularJS

ответ

Смежные вопросы