为什么md-calendar指令将AngularJS初始化为错误的日期？ [英] why md-calendar directive initialize to wrong date AngularJS?

问题描述

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

How to assign md-calendar directive date value as today Date?

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

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

how to change apr 1935 to Aug 2018 in first calendar output. please any help? here is my working code https://codepen.io/anon/pen/RBveJv

推荐答案

此问题基本上是角材料v1版本的错误.1.0 ，有一个 GITHUB票证 （此问题的详细信息），只需升级到最新版本的角度材料1.1.10 ，如下例所示。我们可以消除这个问题。

This issue is basically a bug in the version of angular material v1.1.0, there is a GITHUB ticket with this issue details, by simply upgrading to the latest version angular material 1.1.10 as done in the below example. We can eliminate this issue.

如果您不愿升级角度材料版本，请参见链接，其中包含此问题的修复详细信息。但我强烈建议您升级角形材料而不是自己修复。

If you are hessitant of upgrading your angular material version, here is the link containing the fix details for this issue. But I strongly recommend you upgrade angular material instead of fixing it yourself.

下面是一个可行的演示，供您参考。

Below is a working demo for your reference.

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>

这篇关于为什么md-calendar指令将AngularJS初始化为错误的日期？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！