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

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

像这样，

在控制器中：

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

​

希望能有所帮助。

Answer 2

最大值和最小值的md-datepicker properties为：

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

表示最大日期(包括最大日期)的md- max -表达式。

下一个示例代码是从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展示了如何使用它的示例。