Подтверждение даты начала даты окончания мат angular 8 - PullRequest
Новая
       50

Подтверждение даты начала даты окончания мат angular 8

1 голос
/ 02 апреля 2020

Я работаю в поле выбора даты Мат, где у меня есть дата начала и дата окончания, где у меня есть одна проверка, которая является датой окончания, не должна быть меньше даты начала, например

, если дата начала была 12-ЯНВА- Дата окончания 2020 года может быть 12 января 2020 года или больше, но не может быть 11 января 2020 года.

В настоящее время я пробовал использовать Min MAX, но это не работает, как ожидалось

Я пытался в Google & ТАК не правильно 

   <mat-form-field>
      <input matInput [matDatepicker]="fromDate" placeholder="Choose a date"
          [value]="getData(item2.firstPatientInDate)" [max]="today<item2.lastPatientInDate|| item2.lastPatientInDate == undefined?today:item2.lastPatientInDate" [(ngModel)]="item2.firstPatientInDate">
                    <mat-datepicker-toggle matSuffix [for]="pickerstart"></mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
                </mat-form-field>

        <mat-form-field>
           <input matInput [matDatepicker]="pickerend" [max]="today" [min]="item2.firstPatientInDate"   placeholder="Choose a date"
                        [value]="getData(item2.lastPatientInDate)" [(ngModel)]="item2.lastPatientInDate">
                    <mat-datepicker-toggle matSuffix [for]="pickerend"></mat-datepicker-toggle>
                    <mat-datepicker #picker1></mat-datepicker>

                </mat-form-field>

Ответы [ 2 ]

0 голосов
/ 02 апреля 2020

Рабочий образец можно найти по ссылке ниже:

stackblitz: angular Образец даты начала материала

Файл TypeScript 

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

@Component({
  selector: 'datepicker-value-example',
  templateUrl: 'datepicker-value-example.html',
  styleUrls: ['datepicker-value-example.css'],
})
export class DatepickerValueExample {
  startDate = new FormControl(new Date());
  endDate = new FormControl(new Date());
}

HTML file 

<mat-form-field>
  <input matInput [matDatepicker]="picker1" placeholder="Start Date" [formControl]="startDate">
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

<mat-form-field>
  <input matInput [matDatepicker]="picker2" placeholder="End Date"
   [min]="startDate.value" [formControl]="endDate">
  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
  <mat-datepicker #picker2></mat-datepicker>
</mat-form-field>
0 голосов
/ 02 апреля 2020

Используйте этот способ с реактивными формами с пользовательской проверкой 

constructor(private formBuilder: FormBuilder) { 
   this.yourForm = this.formBuilder.group({
   startDate: [''],
   endDate: ['']
   }, {validator: this.checkDates});  
}

checkDates(group: FormGroup) {
   if(group.controls.endDate.value < group.controls.startDate.value) {
   return { notValid:true }
   }
   return null;
}

В вашем интерфейсе 

<small *ngIf="yourForm.hasError('notValid')">Not valid</small>
...