为啥 md-calendar 指令初始化为错误的日期 AngularJS？

Posted 2023-05-07

【中文标题】为啥 md-calendar 指令初始化为错误的日期 AngularJS？

【英文标题】：why md-calendar directive initialize to wrong date AngularJS?为什么 md-calendar 指令初始化为错误的日期 AngularJS？

【发布时间】：2019-01-19 03:24:21

【问题描述】：

如何将 md-calendar 指令日期值指定为今天日期？

<md-calendar class="fixed-calendar" ng-model="myDate"> 
</md-calendar>

如何在第一个日历输出中将 1935 年 4 月更改为 2018 年 8 月。请帮忙？ 这是我的工作代码 https://codepen.io/anon/pen/RBveJv

【问题讨论】：

你好像有this issue。也是asked before。

【参考方案1】：

这个问题基本上是angular material v1.1.0版本的一个bug，有一个GITHUB ticket有这个问题的详细信息，只需按照下面的例子升级到最新版本angular material 1.1.10。我们可以消除这个问题。

如果您对升级 Angular 材质版本犹豫不决，这里是 link，其中包含此问题的修复详细信息。但我强烈建议您升级angular material 而不是自己修复。

下面是一个工作演示供您参考。

angular.module('MyApp',['ngMaterial', 'ngMessages']).controller('AppCtrl', function($scope) 
  $scope.myDate = new Date();

  $scope.minDate = new Date(
      $scope.myDate.getFullYear(),
      $scope.myDate.getMonth() - 2,
      $scope.myDate.getDate());

  $scope.maxDate = new Date(
      $scope.myDate.getFullYear(),
      $scope.myDate.getMonth() + 2,
      $scope.myDate.getDate());
  
  $scope.onlyWeekendsPredicate = function(date) 
    var day = date.getDay();
    return day === 0 || day === 6;
  
);

.datepickerdemoBasicUsage 
  /** Demo styles for mdCalendar. */ 
  .datepickerdemoBasicUsage md-content 
    padding-bottom: 200px; 

  .datepickerdemoBasicUsage .validation-messages 
    font-size: 11px;
    color: darkred;
    margin: 10px 0 0 25px; 

.fixed-calendar 
  width: 340px;
  height: 340px;
  display: block;


.fixed-calendar .md-calendar-scroll-mask 
  width: 340px !important;


.fixed-calendar .md-virtual-repeat-scroller 
  width: 340px !important;
  height: 308px;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.10/angular-material.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.10/angular-material.min.css" rel="stylesheet"/>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>
<div ng-controller="AppCtrl" style="padding: 40px;"  class="datepickerdemoBasicUsage" ng-app="MyApp" ng-cloak>
  <md-content>
    <md-calendar class="fixed-calendar" ng-model="myDate">
    </md-calendar>

    <h4>Standard date-picker</h4>
    <md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>

    <h4>Disabled date-picker</h4>
    <md-datepicker ng-model="myDate" md-placeholder="Enter date" disabled=""></md-datepicker>

    <h4>Date-picker with min date and max date</h4>
    <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-min-date="minDate" md-max-date="maxDate"></md-datepicker>
    <h4>Only weekends are selectable</h4>
    <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-date-filter="onlyWeekendsPredicate"></md-datepicker>

    <h4>Only weekends within given range are selectable</h4>
    <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-min-date="minDate" md-max-date="maxDate" md-date-filter="onlyWeekendsPredicate"></md-datepicker>
    
    <h4>With ngMessages</h4>
    <form name="myForm">
      <md-datepicker name="dateField" ng-model="myDate" md-placeholder="Enter date" required="" md-min-date="minDate" md-max-date="maxDate" md-date-filter="onlyWeekendsPredicate"></md-datepicker>

      <div class="validation-messages" ng-messages="myForm.dateField.$error">
        <div ng-message="valid">The entered value is not a date!</div>
        <div ng-message="required">This date is required!</div>
        <div ng-message="mindate">Date is too early!</div>
        <div ng-message="maxdate">Date is too late!</div>
        <div ng-message="filtered">Only weekends are allowed!</div>
      </div>
    </form>
    
  </md-content>
</div>

【讨论】：

@NandhiniPriya 你能检查一下这个codepen

【参考方案2】：

如果您对升级 Angular 材质版本犹豫不决

在控制器中尝试这样的事情

$scope.datepickeropen = function()
    $timeout(function () 
        var e1 = jQuery.Event("keydown");
        e1.which = 40; // it is down
        $(".md-datepicker-calendar .md-focus").trigger(e1);
        var e2 = jQuery.Event("keydown");
        e2.which = 38; // it is up
        $(".md-datepicker-calendar .md-focus").trigger(e2);
    ,500)

html 格式

<md-input-container>
    <label>Withdrawal Date</label>
    <md-datepicker ng-model="date" ng-focus="datepickeropen()"></md-datepicker>
</md-input-container>

angular.module('MyApp',['ngMaterial', 'ngMessages']).controller('AppCtrl', function($scope, $timeout) 
  $scope.myDate = new Date();
  $scope.datepickeropen = function()
      $timeout(function () 
          var e1 = jQuery.Event("keydown");
          e1.which = 40; // it is down
          $(".md-datepicker-calendar .md-focus").trigger(e1);
          var e2 = jQuery.Event("keydown");
          e2.which = 38; // it is up
          $(".md-datepicker-calendar .md-focus").trigger(e2);
      ,500)
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css" rel="stylesheet"/>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>

<div ng-controller="AppCtrl" style="padding: 40px;"  class="datepickerdemoBasicUsage" ng-app="MyApp" ng-cloak>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>

<h4>Standard date-picker <u>with issue fixed</u></h4>
    <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-hide-icons="triangle" ng-focus="datepickeropen()"></md-datepicker>
    
    <h4>Standard date-picker <u>with issue</u></h4>
    <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-hide-icons="triangle"></md-datepicker>
    

</div>