Динамическое изменение формата даты по условию в saturn-datepicker (материал datepicker) - PullRequest
Новая
       42

Динамическое изменение формата даты по условию в saturn-datepicker (материал datepicker)

0 голосов
/ 15 октября 2019

Что я хочу сделать, это показать дату в поле ввода datepicker с помощью UserInfo.dateFormat.

У объекта UserInfo есть логин dateFormat логина пользователя.

Сначала я подумал вот так. но этот код неверен. Сообщение об ошибке сообщает TypeError: Невозможно прочитать свойство dateInput из неопределенного.

component.ts 

providers: [
  UserInfoService,
  { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
  { provide: MAT_DATE_FORMATS, useFactory: dateFormatFactory, deps: [UserInfoService], multi: true },
],

date-format-factory.ts 

export function dateFormatFactory(userInfoService: UserInfoService): MatDateFormats {
  let matFormat: MatDateFormats;
  userInfoService.userInfo$.subscribe((userInfo) => {
    const filtered = CUSTOM_FORMATS.filter((format) => format.format === userInfo.dateFormat);
    matFormat = filtered[0].matFormat;
  });
  if (matFormat) {
    return matFormat;
  }
}

custom-date-format.ts 

export const CUSTOM_FORMATS = [
  {
    format: 'yyyy-MM-dd',
    matFormat: YYYYMMDD,
  },
  {
    format: 'MM-dd-yyyy',
    matFormat: MMDDYYYY,
  },
];

const YYYYMMDD: MatDateFormats = {
  parse: {
    dateInput: 'YYYY-MM-DD',
  },
  display: {
    dateInput: 'YYYY-MM-DD',
    monthYearLabel: 'YYYY MM',
    dateA11yLabel: 'YYYY-MM-DD',
    monthYearA11yLabel: 'YYYY MM',
  },
};

const MMDDYYYY: MatDateFormats = {
  parse: {
    dateInput: 'MM-DD-YYYY',
  },
  display: {
    dateInput: 'MM-DD-YYYY',
    monthYearLabel: 'MM YYYY',
    dateA11yLabel: 'MM-DD-YYYY',
    monthYearA11yLabel: 'MM YYYY',
  },
};

, поэтому я изменился следующим образом.

component.ts 

 providers: [
  UserInfoService,
  // I changed here.
  { provide: DateAdapter, useClass: CustomDateAdapter },
  { provide: MAT_DATE_FORMATS, useFactory: dateFormatFactory, deps: [UserContextService], multi: true },
],

custom-date-adaptor.ts 

@Injectable()
export class CustomDateAdapter extends NativeDateAdapter {
  parse(value: any): Date | null {
    if (typeof value === 'string' && value.indexOf('/') > -1) {
      const str = value.split('/');
      const year = Number(str[2]);
      const month = Number(str[1]) - 1;
      const date = Number(str[0]);
      return new Date(year, month, date);
    }
    const timestamp = typeof value === 'number' ? value : Date.parse(value);
    return isNaN(timestamp) ? null : new Date(timestamp);
  }
  format(date: Date, displayFormat: string): string {
    console.log('CustomDateAdapter displayFormat = ', displayFormat);
    if (displayFormat === 'input') {
      const day = date.getDate();
      const month = date.getMonth() + 1;
      const year = date.getFullYear();
      return `${year}-${this._to2digit(month)}-${this._to2digit(day)}`;
    } else {
      return date.toDateString();
    }
  }
  private _to2digit(n: number) {
    return `00${n}`.slice(-2);
  }
}

Я думал, что смогу перехватить displayFormat в методе format, но этот код тоже не очень хорош. это то же самое сообщение об ошибке.

Как я могу динамически изменить формат даты после получения userInfo.dateFormat ??

Я прошу прощения за мой плохой английский, если вы не понимаете, что я пишу.

...