Question

我正在Angular 7中开发应用程序。在一个日期字段中，我使用了角材料datepicker inout。问题是，选择日期后，日期选择器始终采用用户本地时区。但我想将其设置为特定的时区，例如东部或太平洋时区。当用户选择一个日期时，它应该总是到那个特定的时区。太平洋06/22/2019 23:59 我是新手。如何在Angular 7应用程序中做到这一点？预先谢谢你。

Answer 1

From the Angular Material docs，提供的DateAdapter的默认设置是使用用户的时区。

您必须提供自己的DateAdapter才能覆盖它。

我发现this StackBlitz example展示了解决此问题的一种可能方法，但没有尝试过。

这里是一个片段：

@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 }

Answer 2

您需要执行以下操作：

创建用户日期格式管道。
创建扩展NativeDateAdapter的自定义日期适配器。
将CustomDateAdapter导入模块，该模块将用作useClass: CustomDateAdapter

app.module.ts

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

custom-date-adaptor.ts

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

user-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

如何为角形材料日期选择器设置特定的时区？

2 个答案: