Question

<tr>
  <td class="p-10">
    <mat-form-field>
      <input matInput [matDatepicker]="picker" placeholder="Tarih" name="date" id="date"
             #date="ngModel" ngModel required>
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
      <mat-error *ngIf="date.touched && date.invalid">
        Lütfen geçerli bir değer giriniz.
      </mat-error>
    </mat-form-field>
  </td>
  <td class="p-10">
    <mat-form-field>
      <mat-select placeholder="Talep Eden Kurum" #i_request_owner="ngModel"
                  ngModel id="i_request_owner" name="i_request_owner"
                  required>
        <mat-option *ngFor="let ro of requestOwners" [value]="ro.i_corporation"> {{
          ro.display_name }}
        </mat-option>
      </mat-select>
      <mat-error *ngIf="i_request_owner.touched && i_request_owner.invalid">
        <div *ngIf="i_request_owner.errors.required">Bu alanı boş geçemezsiniz.
        </div>
      </mat-error>
    </mat-form-field>
  </td>
</tr>
<tr>
  <td class="p-10">
    <mat-form-field>
      <input matInput [matDatepicker]="endpicker" placeholder="İrtifak Bitiş Tarihi"
             name="endDate" min ="date" id="endDate"
             #endDate="ngModel" ngModel required>
      <mat-datepicker-toggle matSuffix [for]="endpicker"></mat-datepicker-toggle>
      <mat-datepicker #endpicker></mat-datepicker>
      <mat-error *ngIf="endDate.touched && endDate.invalid">
        Lütfen geçerli bir değer giriniz.
      </mat-error>
    </mat-form-field>
  </td>
</tr>

我想在我的表单中添加一个endDate，它不应该在开始日期之前。我做的是在endDate上放一个“min = sartDate”。但它没有奏效。 EndDate不应该在开始日期之前。

Answer 1

最大和最小的md-datepicker properties是：

md-min-date 表示最小日期（包括）的表达式。

md-max-date 表示最大日期（含）的表达式。

下一个示例代码是从demos in the docs

中提取的

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache']).controller('AppCtrl', function() {
  this.myDate = new Date();

  this.minDate = new Date(
    this.myDate.getFullYear(),
    this.myDate.getMonth() - 2,
    this.myDate.getDate()
  );

  this.maxDate = new Date(
    this.myDate.getFullYear(),
    this.myDate.getMonth() + 2,
    this.myDate.getDate()
  );

  this.onlyWeekendsPredicate = function(date) {
    var day = date.getDay();
    return day === 0 || day === 6;
  };
});

<md-content class="datepickerdemoValidations" ng-controller="AppCtrl as ctrl" ng-app="MyApp" ng-cloak="" layout-padding="">
  <div layout-gt-xs="row">
    <div flex-gt-xs="">
      <h4>Date-picker with min date and max date</h4>
      <md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" md-max-date="ctrl.maxDate" md-min-date="ctrl.minDate"></md-datepicker>
    </div>
</md-content>

Here you have a codepen显示了如何使用它的示例。

Answer 2

类似的东西，

在控制器中：

$scope.$watch('model.Template.StartDate', validateDates);
$scope.$watch('model.Template.EndDate', validateDates);

function validateDates() {
  if (!$scope.model) return;
  if ($scope.form.startDate.$error.invalidDate || 
  $scope.form.endDate.$error.invalidDate) {
  $scope.form.startDate.$setValidity("endBeforeStart", true);  //already 
  invalid (per validDate directive)
} else {
    //depending on whether the user used the date picker or typed it, this 
    //will be different (text or date type).  
    //creating a new date object takes care of that.  
    var endDate = new Date($scope.model.Template.EndDate);
    var startDate = new Date($scope.model.Template.StartDate);
    $scope.form.startDate.$setValidity("endBeforeStart", endDate >= 
    startDate);
 }
}

HTML：

<form name="myForm">
    <input id="startDate" type="text" valid-date datepicker-
       popup="MM/dd/yyyy" 
       ng-model="model.Template.StartDate" name="startDate" 
       ng-required="true" 
   />

<input id="endDate" type="text" valid-date datepicker-popup="MM/dd/yyyy" ng-
 model="model.Template.EndDate" name="endDate" ng-required="true" />

<span ng-show="form.startDate.$error.endBeforeStart">End date must be on or 
after start date.</span>

 <span ng-show="form.startDate.$error.invalidDate || 
 form.endDate.$error.invalidDate">Check dates for validity</span>
<span ng-show="form.startDate.$error.required || 
form.endDate.$error.required">A required date is missing</span>

希望它有所帮助。

Angular中的开始和结束日期验证

2 个答案: