Пользовательское значение средства выбора даты в Angular при получении ошибки

Я работаю над пользовательским значением средства выбора даты Mat. Вот мой код, который я пытаюсь

      <div class="form-group" *ngIf="selectVal.value == 'Date'">
                <mat-form-field>
                <input matInput [matDatepicker]="picker" (dateChange)="formatDate(dateValue.value)" #dateValue  formControlName="assumptionValueInDatetime" class="form-control" placeholder="Choose a date" >
                    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
                </mat-form-field>
            </div>

Вот мой код ts. Вот формат, который я хочу 07-ИЮЛ-2020

    formatDate(value) {
        const months = ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
        let formatDate = ('0' + value.getDate()).slice(-2) + "-" + months[value.getMonth()] + "-" + (value.getFullYear());
        return formatDate;
    }

Вот как выглядит моя полезная нагрузка:

    initassumpationForm() {
        this.assumptionDesignForm = this.fb.group({
            assumptionValueInDatetime: this.formatDate(this.assumptionValueInDatetime)
        });     
    }

Получение ошибки как:

ОШИБКА TypeError: невозможно прочитать свойство getDate из undefined


angular angular8 mat mat-datepicker
person Mr.M    schedule 08.03.2020    source источник
comment
Попробуйте это: новая дата (this.assumingValueInDatetime)   -  person Chellappan வ    schedule 08.03.2020
comment
@Chellappan வ если я использую этот формат, как он преобразуется в 12-JUN-2020 любую идею   -  person Mr.M    schedule 08.03.2020
comment
@Chellappan வ выдает ошибку   -  person Mr.M    schedule 08.03.2020
comment
Вы проверили это: материал .angular.io / components / datepicker /   -  person Chellappan வ    schedule 08.03.2020

Ответы (1)


arrow_upward
0
arrow_downward

Лучший способ сделать это - создать собственный адаптер даты (это услуга). Поскольку вы используете объект JavaScript Date в качестве основного формата даты, вы можете просто расширить NativeDateAdapter, предоставленный в @angular/material/core, и переопределить два метода: parse и format. Первый получает объект Date из вашего строкового формата (например: 01-MAR-2020), а второй получает строковый объект из объекта Date (как и ваша функция formatDate, указанная в тексте вопроса).

После создания собственного собственного класса адаптера даты просто укажите его в своем AppModule с помощью токена DateAdapter:

import {DateAdapter} from '@angular/material/core';
...

@NgModule({
  ...
  providers: [{provide: DateAdapter, useClass: CustomNativeDateAdapter}]
  ...
})
export class AppModule {}

Что касается класса CustomNativeDateAdapter, в вашем случае это будет примерно так:

import { Injectable } from '@angular/core';
import { NativeDateAdapter } from '@angular/material/core';

@Injectable()
export class CustomNativeDateAdapter extends NativeDateAdapter {
  months: string[] = [ 'JAN', 'FEB', 'MAR', 'APR',  'MAY', 
    'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC' ];

  monthsObj: { [key: string]: number } = { JAN: 0, FEB: 1, MAR: 2, APR: 3, 
    MAY: 4, JUN: 5, JUL: 6, AUG: 7, SEP: 8, OCT: 9, NOV: 10, DEC: 11 };

  parse(value: any): Date | null {
    if (typeof value == 'number') {
      return new Date(value);
    }

    const dateRegex: RegExp = /^(0|1)[1-9]-[A-Z]{3}-(1|2)[0-9]{3}$/;
    if (typeof value == 'string' && dateRegex.test(value)) {
      const dateSplit = value.split('-');
      return new Date(+dateSplit[2], this.monthsObj[dateSplit[1]],
        +dateSplit[0], 12, 0, 0, 0);
    }

    return null;
  }

  format(date: Date, displayFormat: Object): string {
    if (!this.isValid(date)) {
      throw Error('NativeDateAdapter: Cannot format invalid date.');
    }

    let formatDate = ('0' + date.getDate()).slice(-2) +
      '-' + this.months[date.getMonth()] + '-' + date.getFullYear();
    return formatDate;
  }
}
person julianobrasil    schedule 26.03.2020