Как я могу установить определенный часовой пояс для углового выбора даты?

Question

Я занимаюсь разработкой приложения на Angular 7. В поле даты есть поле ввода данных углового материала inout. Проблема в том, что при выборе даты DatePicker всегда берет местный часовой пояс пользователя. Но я хочу настроить его на определенный часовой пояс, такой как часовой пояс в восточном или тихом океане. Когда пользователь выбирает дату, она всегда должна приходить в конкретный часовой пояс, например. 22.06.2009 23:59 Pacific. Я новичок в угловой. Как это можно сделать в приложении Angular 7? Заранее спасибо.

Answer 1

Вам понадобится следующее:

1. Создание пользовательского канала формата даты.
2. Создание настраиваемого адаптера даты, расширяющего NativeDateAdapter.
3. Импорт CustomDateAdapter в модуль, где он будет использоваться как useClass: CustomDateAdapter

app.module.ts

@NgModule({
  imports: [],
  declarations: [],
  exports: [],
  entryComponents: [],
  providers: [{
    provide: DateAdapter,
    useClass: CustomDateAdapter
  }]
})
export class AppModule {}

заказ дата-adaptor.ts

export class CustomDateAdapter extends NativeDateAdapter {
  format(date: Date): string {
    const pipe = new UserDateFormatPipe();
    return pipe.transform(date);
  }
}

пользователем дата-format.ts

// using moment.js
export class UserDateFormatPipe implements PipeTransform {

  transform(date: string | Date, timeFormat: string = ''): string {
    const defaultValues = {
      dateFormat: 'MM-dd-yyyy',
      language: 'en-US',
      timeZone: 'Central' //change defaults accordingly
    };
    const timeZoneOffset = moment(new Date(date))
      .tz(defaultValues)
      .format('Z');
    const datePipe = new DatePipe(defaultValues.language);
    const dateFormat = timeFormat ? `${defaultValues.dateFormat}  ${timeFormat}` : defaultValues.dateFormat;
    return datePipe.transform(date, dateFormat, timeZoneOffset, defaultValues.language);
  }
}

Stackblitz-Demo

Answer 2

Из документов угловых материалов по умолчанию для предоставленного адаптера даты используется часовой пояс пользователя.

Вы должны будете предоставить свой собственный DateAdapter, чтобы переопределить это.

Я нашел этот пример StackBlitz , который показывает возможный способ решения этой проблемы, но еще не пробовал.

Вот фрагмент оттуда:

@Injectable()
export class CustomDateAdapter extends MomentDateAdapter {

  constructor( @Optional() @Inject(MAT_DATE_LOCALE) dateLocale: string) {
    super(dateLocale);
  }

  parse(value, parseFormat) {
    if (value && typeof value == 'string') {
      console.log(moment(value, parseFormat, this.locale, true));
      return moment(value, parseFormat, this.locale, true);
    }
    return value ? moment(value).locale(this.locale) : undefined;
  }
}

И предоставление его (простая версия):

{ provide: DateAdapter, useClass: CustomDateAdapter }