如何在运行时更改Angular Material Datepicker格式 [英] How to change Angular Material Datepicker format in run-time

问题描述

我正在使用具有 Material 设计的 Angular 应用程序，并且正在使用 Moment.js 来解析和格式化日期.

I'm working on an Angular App with Material Design, and I'm using Moment.js to parse and format dates.

在我的其中一个页面中，我有一个材料的日期选择器.我已经按照材料的指导方针使Datepicker与moment对象一起工作，而不是在本机Date对象上工作.

In one of my pages I have a Material's Datepicker. I have followed the material's guide-lines to make the Datepicker work with moment object - instead on the native Date object.

我也设法以某种格式在日期选择器中显示日期.但是，此格式在组件的提供程序中进行了硬编码. 如何根据用户偏好在运行时更改格式?

Also I managed to display the Date in the Datepicker in a certain format. But this format in hard coded in the Component's providers. How can I change the format during run-time, according to the user preferences?

我已经安装了npm的软件包:

I've installed npm's packages:

$ npm i moment -S
$ npm i @angular/material-moment-adapter -S

// app.module.ts
import { MatMomentDateModule } from '@angular/material-moment-adapter'
...
@NgModule({
  imports: [
    MatMomentDateModule,
...

// demo.component.ts
import * as moment from 'moment';
import { MAT_DATE_FORMATS } from '@angular/material/core';
const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'LL',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};
@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss'],
  providers: [
    { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
  ],
})
export class DemoComponent {
   public dateVal = moment();
}

// demo.component.html
<mat-form-field>
  <input matInput [matDatepicker]="myDatePicker" [(ngModel)]="dateVal">
  <mat-datepicker-toggle matSuffix [for]="myDatePicker"></mat-datepicker-toggle>
  <mat-datepicker #myDatePicker></mat-datepicker>
</mat-form-field>

如您所见，日期格式是在组件的提供程序中定义的.如何在运行时更改它?

As you can see, the date-format is defined in the Component's providers. How can I change this in run-time?

可以在此处找到一个工作示例:
https://stackblitz.com/angular/mgaargebgpd?file=app ％2Fdatepicker-formats-example.ts

A working example could be found here:
https://stackblitz.com/angular/mgaargebgpd?file=app%2Fdatepicker-formats-example.ts

推荐答案

好，所以我终于找到了一种在运行时更改mat-date-picker格式的方法(文档完全没有帮助).

OK, so I finally find a way to change the mat-date-picker format during run-time (the documentation didn't help at all).

您可能已经有这样的服务，如果没有，则应创建一个服务，以便可以将日期格式控制在一个位置.

You probable already have a service like this, if no you should create one, so you could control the date-formatting in one place.

// date-time.service
import { Injectable } from '@angular/core';
import * as moment from 'moment';

@Injectable({ providedIn: 'root' })
export class DateTimeService
{
  public getFormat(): string
  {
    return "DD-MM-YYYY"; // add you own logic here
  }
  public getLocale(): string
  {
    return "he-IL"; // add you own logic here
  }  
}

步骤2-创建一个 CustomDateAdapter ，它将负责在运行时解析日期

Step #2 - Create a CustomDateAdapter, that will be responsible for parsing the date during run-time

// customDateAdapter.ts
import { Injectable } from '@angular/core';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import * as moment from 'moment';
import { DateTimeService } from './date-time.service';

@Injectable()
export class CustomDateAdapter extends MomentDateAdapter
{
  constructor(private _dateTimeService: DateTimeService)
  {
    super('en-US'); // set default locale
  }

  public format(date: moment.Moment, displayFormat: string): string
  {
    const locale = this._dateTimeService.getLocale();
    const format = this._dateTimeService.getFormat();

    return date.locale(locale).format(format);
  }
}

请注意:" CustomDateAdapter "是常规类，而不是组件.尽管我们正在为该课程注入服务.为此，我们需要将@Injectable()装饰器添加到"CustomDateAdapter"中，并在app.module.ts中进行一些灯光更改.

Please Notice: That "CustomDateAdapter" is a regular class, and not a component. Although we are injecting a service to this class. To achieve this we need to add the @Injectable() decorator to the "CustomDateAdapter", and make some light changes in the app.module.ts.

// app.module.ts
import { DateAdapter, MatNativeDateModule } from '@angular/material';
import { MatMomentDateModule } from '@angular/material-moment-adapter'
import { CustomDateAdapter } from './<some-path>/customDateAdapter';

@NgModule({
  imports:
  [
    MatNativeDateModule,
    MatMomentDateModule
  ],
  providers:
  [
    CustomDateAdapter, // so we could inject services to 'CustomDateAdapter'
    { provide: DateAdapter, useClass: CustomDateAdapter }, // Parse MatDatePicker Format
  ]
})
export class AppModule { /* ... */ }

P.S
请注意，问题中的代码(来自"demo.component.ts")不再相关.

P.S
Please notice that the code from the question (from the "demo.component.ts") isn't relevant any more.

在Stackblitz的演示

这篇关于如何在运行时更改Angular Material Datepicker格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！