Angular 8: Как исправить значения formcontrol для mat-datepicker с проверкой даты [min], а значение даты formcontrol меньше, чем дата [min]?

Как исправить значения formcontrol для mat-datepicker с проверкой [min] Date и датой formcontrol меньше, чем дата [min]?

вот html.

<label class="label input-form-label">Date:</label>
<span class="input-group-addon" (click)="picker.open();">
  <input [matDatepicker]="picker" [min]="today" type="text" class="input-form" formControlName="date">
  <div class="datepicker-icon-div" style="right: 30px;">
    <i class="fa fa-calendar"></i>
  </div>
</span>
<span>
  <mat-datepicker #picker></mat-datepicker>
</span>

вот reactive form.

today = new Date(); // suppose todays date is 27-05-2020 
pastDate = new Date(2020, 05, 24);

this.form = this.fb.group({
  date: [this.today, Validators.required]
})

patchFormValue(){
  this.form.patchValue({
    date: this.pastDate
  })
}

Я хочу отключить прошлые даты из matdatepicker, поэтому я добавил к нему проверку [min]. Но я тоже хочу исправить прошлую дату. Есть ли другой способ отключить даты или исправить прошлую дату?


angular date angular-reactive-forms mat-datepicker
person S.H    schedule 27.05.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

В Js месяц нулевой индекс, поэтому май == 4

Ссылаться

https://stackblitz.com/edit/angular-ivy-aeasyj

person Supun De Silva    schedule 27.05.2020

arrow_upward
0
arrow_downward

Я не уверен, нужно ли вам это все еще или нет, но сегодня я столкнулся с чем-то подобным, когда у нас были значения, поступающие из базы данных, которые были старше сегодняшней даты, но мы не позволяли им выбирать даты из сборщика, которые были старше даты.

Я закончил тем, что сделал что-то, что сработало для меня, хотя это и некрасиво.

Сначала я добавил [dateClass]=dateClass() и [startAt]=today в средство выбора даты и избавился от проверки [min].

<label class="label input-form-label">Date:</label>
<span class="input-group-addon" (click)="picker.open();">
  <input [matDatepicker]="picker" type="text" class="input-form" formControlName="date">
  <div class="datepicker-icon-div" style="right: 30px;">
    <i class="fa fa-calendar"></i>
  </div>
</span>
<span>
  <mat-datepicker [startAt]="today" [dateClass]="dateClass()" #picker></mat-datepicker>
</span>

Затем я добавил этот метод в component.ts, чтобы он добавлял новый стиль CSS ко всем значениям, которые были до сегодняшней даты.

dateClass() {
    return (date: Date): MatCalendarCellCssClasses => {
        return  date.setHours(0, 0, 0, 0) < this.today.setHours(0, 0, 0, 0) ? 'disable-dates' : undefined;
    }
}

Затем я добавил этот класс css в свой компонент, чтобы он издевался над стилем дат с отключенным матом из средства выбора даты.

::ng-deep.disable-dates {
  pointer-events: none;
}

::ng-deep.disable-dates > .mat-calendar-body-cell-content {
  color: rgba(0, 0, 0, 0.38);
}

Таким образом, он отключит даты в средстве выбора даты, но не приведет к тому, что проверка произойдет в поле ввода, к которому было прикреплено средство выбора.

https://stackblitz.com/edit/angular-ivy-atw9cz

person Bryant Reese    schedule 16.03.2021