Дата начала Дата окончания Дата окончания проверки угловой 8

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

если дата начала была 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>

angular angular8 material-ui angular-material mat-datepicker
person Mr.M    schedule 02.04.2020    source источник
comment
Пожалуйста, покажите свой код.   -  person nash11    schedule 02.04.2020

Ответы (3)


arrow_upward
1
arrow_downward

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

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;
}

В вашем Front End

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

arrow_upward
3
arrow_downward

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

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-файл

<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>
person Harsh    schedule 02.04.2020
comment
в основном я получаю значение от службы для отображения даты, но с указанным выше кодом, который не работает, поэтому я попробовал добавить стоимость, но все еще получил некоторую ошибку - person Mr.M; 02.04.2020
comment
Пожалуйста, обновите свой вопрос соответственно, откуда вы назначаете данные для поля и какую ошибку вы получаете - person Harsh; 02.04.2020
comment
Мне также нужно получить значение от службы, поэтому я использую значение, вы можете проверить это - person Mr.M; 02.04.2020
comment
Я получаю сообщение об ошибке Cannot read property 'value' of undefined В моей форме formControlName, в чем разница между ним и [formControl]? - person Pinka; 21.04.2021

arrow_upward
2
arrow_downward

Попробуйте этот способ для проверки настраиваемого диапазона дат

В HTML-коде, как вы можете видеть на событии (dateChange). Я создал методы compareStartdateValidator и compareEnddateValidator для проверки введенного диапазона дат.

HTML файл

  <mat-form-field appearance="outline">
    <mat-label> Covering Start Date </mat-label>
    <input
      matInput
      [matDatepicker]="CovStartdate"
      formControlName="covstartdate"
      (dateChange)="comparisonStartdateValidator()"
      required
    />
    <mat-datepicker-toggle
      matSuffix
      [for]="CovStartdate"
    ></mat-datepicker-toggle>
    <mat-datepicker #CovStartdate></mat-datepicker>
    <mat-error
      *ngIf="
        formGroup.controls['covstartdate'].hasError('invaliddaterange')
      "
    >
      <strong>Start date cannot be greater than end date</strong>
    </mat-error>
    <mat-error
      *ngIf="formGroup.controls['covstartdate'].hasError('required')"
    >
      Covering Start date is <strong>required</strong>
    </mat-error>
  </mat-form-field>

  <mat-form-field appearance="outline">
    <mat-label> Covering End Date </mat-label>
    <input
      matInput
      [matDatepicker]="CovEnddate"
      formControlName="covenddate"
      (dateChange)="comparisonEnddateValidator()"
      required
    />
    <mat-datepicker-toggle
      matSuffix
      [for]="CovEnddate"
    ></mat-datepicker-toggle>
    <mat-datepicker #CovEnddate></mat-datepicker>
    <mat-error
      *ngIf="formGroup.controls['covenddate'].hasError('invaliddaterange')"
    >
      <strong>End date cannot be earlier than start date</strong>
    </mat-error>
    <mat-error
      *ngIf="formGroup.controls['covenddate'].hasError('required')"
    >
      Covering End date is <strong>required</strong>
    </mat-error>
  </mat-form-field>
</div>

Начальное изображение диапазона дат

TS файл

Здесь, в коде TS, вы можете использовать мои настроенные ниже проверки. Метод compareEnddateValidator проверяет дату окончания, а метод compareStart dateValidator проверяет дату начала.

   constructor() { 
     formGroup: FormGroup = new FormGroup({
       covenddate: new FormControl(),
       covstartdate: new FormControl()
     });
   }

  comparisonEnddateValidator(): any {
    let ldStartDate = this.formGroup.value['covstartdate'];
    let ldEndDate = this.formGroup.value['covenddate'];

    let startnew = new Date(ldStartDate);
    let endnew = new Date(ldEndDate);
    if (startnew > endnew) {
      return this.formGroup.controls['covenddate'].setErrors({ 'invaliddaterange': true });
    }

    let oldvalue = startnew;
    this.formGroup.controls['covstartdate'].reset();
    this.formGroup.controls['covstartdate'].patchValue(oldvalue);
    return this.formGroup.controls['covstartdate'].setErrors({ 'invaliddaterange': false });
  }

  comparisonStartdateValidator(): any {
    let ldStartDate = this.formGroup.value['covstartdate'];
    let ldEndDate = this.formGroup.value['covenddate'];

    let startnew = new Date(ldStartDate);
    let endnew = new Date(ldEndDate);
    if (startnew > endnew) {
      return this.formGroup.controls['covstartdate'].setErrors({ 'invaliddaterange': true });
    }

    let oldvalue = endnew;
    this.formGroup.controls['covenddate'].reset();
    this.formGroup.controls['covenddate'].patchValue(oldvalue);
    return this.formGroup.controls['covenddate'].setErrors({ 'invaliddaterange': false });
  }

Пример ошибки изображения даты начала Пример ошибки изображения даты окончания

person Kaato    schedule 27.01.2021