Как включить только определенные даты в Angular 5?

У меня есть набор дат, и я хочу включить только эти даты в <mat-datepicker>.

"ListOfDates": [
      {
         "startDate": "2018-01-01T08:00:00"
      },
      {
         "startDate": "2018-01-02T08:00:00"
      },
      {
        "startDate": "2018-01-03T09:00:00",
      }]

Это мой HTML-код:

<mat-form-field>
     <input matInput
        [matDatepicker]="picker"
        [matDatepickerFilter]="dateFilter"
        placeholder="Choose a date">
     <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
     <mat-datepicker #picker></mat-datepicker>
 </mat-form-field>

В моем файле Component.ts:

@Component({...})
export class SomeComponent.ts {

    dateFilter = (date: Date) => date.getDate()

}

Кто-нибудь может помочь в этом?


datepicker angular5
person JavaSSE    schedule 31.01.2018    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Вам понадобится собственный валидатор. Более подробную информацию можно найти здесь: https://material.angular.io/components/datepicker/overview#date-validation

По сути, вы даете функцию, которая принимает дату и возвращает логическое значение, указывающее, действительна ли эта дата. В вашем случае вы хотите в своем контроллере проверить, является ли данная дата членом вашего списка. Вот базовая реализация:

HTML:

<mat-form-field class="example-full-width">
  <input matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

TS:

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

/** @title Datepicker with filter validation */
@Component({
  selector: 'datepicker-filter-example',
  templateUrl: 'datepicker-filter-example.html',
  styleUrls: ['datepicker-filter-example.css'],
})
export class DatepickerFilterExample {
  validDates = {
    "2018-01-01T08:00:00": true,
    "2018-01-02T08:00:00": true
  }

  myFilter = (d: Date): boolean => {
    // Using a JS Object as a lookup table of valid dates
    // Undefined will be falsy.
    return validDates[d.toISOString()];
  }
}
person VivaLaPanda    schedule 31.01.2018
comment
Большое спасибо за ваш ответ . Я попробовал приведенный выше код, но он не работает :( Даты не включены, он должен включать 01.01.2018 и 01.02.2018. - person JavaSSE; 31.01.2018
comment
Вы можете захотеть установить точку останова в фильтре. Проверьте, если/почему сравнение возвращает false. Я ожидаю, что это связано с тем, что поле часа не совпадает или что-то в этом роде. Распечатайте d и посмотрите, как это выглядит. - person VivaLaPanda; 31.01.2018
comment
ах.. да, вы правы. d.toISOString() возвращает дату как 2018-02-21T18:30:00.000Z, но в моем JSON это 2018-01-01T08:00:00. Я только что попробовал добавить 0Z, и он работает, как и ожидалось. Большое спасибо :) - person JavaSSE; 01.02.2018
comment
Нет проблемы. Хотя imo вы должны просто бросить все после даты. d.toISOString().split('T')[0] сделает это. Это немного чище. - person VivaLaPanda; 02.02.2018

arrow_upward
1
arrow_downward 

myFilter = (d: Date): boolean => {
  let enableFlag = false;
  this.ListOfDates.some((date) => {
    if (date.startDate === d) { // You can use any other comparison operator used by date object
      enableFlag = true;
      return true;
    }
  })
  return enableFlag;
}

Примечание. Вам нужно будет отформатировать d и даты в ListOfDates в стандартном формате по вашему выбору.

person Chandra Sagar    schedule 04.02.2020