关于angular：如何以最简单的方式将Mat-Datepicker日期格式更改为DD / MM / YYYY？

How to change Mat-Datepicker date format to DD/MM/YYYY in simplest way?

我正在为DOB设置mat-datepicker，传统上显示格式为MM / DD / YYYY，我需要用较少的编码将其更改为DD / MM / YYYY

我在mat-date picker中尝试过format标记，但是它不起作用，其他日期选择器(如ngbDatepicker format)可以通过一行编码轻松更改

1
2
3
4
5
6
7
8

<mat-form-field>
<input matInput [matDatepicker]="picker2" [max]="currentDate"
placeholder="DOB(DD/MM/YYYY)" required formControlName="dob"
readonly />
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-
toggle>
<mat-datepicker #picker2></mat-datepicker>
</mat-form-field>

从日期选择器中选择后显示的日期应为DD-MM-YYYY，从日期选择器中检索值时，其日期也应为DD-MM-YYYY格式

最简单的方法是更改语言环境：

将以下内容添加到模块的providers部分：

1	{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' }

相关讨论

首先，将格式绑定到您的mat-datepicker。

1
2
3
4
5
6
7
8
9
10
11

export const MY_FORMATS = {
parse: {
dateInput: 'LL'
},
display: {
dateInput: 'YYYY-MM-DD',
monthYearLabel: 'YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'YYYY'
}
};

与此同时，您需要导入并提供模块。

1 2	import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material'; import { MomentDateModule, MomentDateAdapter } from '@angular/material-moment-adapter';

1 2	{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] }, { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS }

在HTML中，只需遵循以下步骤即可。

1
2
3
4
5
6
7
8
9
10

<mat-form-field>
<input
matInput
[matDatepicker]="dp"
placeholder="Verbose datepicker
[formControl]="date"
>
<mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
<mat-datepicker #dp></mat-datepicker>
</mat-form-field>

在使用mat-datepicker的组件中尝试一下

1
2
3
4
5

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

constructor(private dateAdapter: DateAdapter<Date>) {
this.dateAdapter.setLocale('your locale');
}

相关讨论

从核心使用dateadapter

1
2
3
4
5
6

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

constructor(private dateAdapter: DateAdapter<Date>) {
this.dateAdapter.setLocale('en-GB'); //dd/MM/yyyy

}

在结合了这里各种答案的一些知识之后，我开始工作了，所以我认为我应该巩固对我有用的东西。

角度10：

在您的模块中，导入MAT_DATE_LOCALE并将其添加到提供程序：

1
2
3
4
5
6
7
8
9
10

import { MAT_DATE_LOCALE } from '@angular/material/core'

@NgModule({
declarations: [...],
imports: [...],
exports: [...],
providers: [
{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
]
})

如果您使用共享模块导入材料，这将更改整个站点上日期选择器的所有格式。

1	formatDate(Date(),"yyyy-MM-dd", 'en-GB')