关于打字稿：如何在Angular 7中显示澳大利亚日期格式？

how to show Australian date format in Angular 7?

我正在使用datepicker，并且有以下代码：

1
2
3
4
5
6
7
8
9
10
11
12

<mat-form-field>
<input matInput
[matDatepicker]="picker"
placeholder="select a date"
(dateChange)="setDate($event.value)">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput type="time" value="16:30">
</mat-form-field>
<input matInput value="{{ date | date: 'y-MM-dd' }}">

在此日期选择器示例中，存在美国日期格式。我想使用澳大利亚的日期格式，即dd / mm / yyyy。我能够创建一个隐藏的输入并将其转换为yyyy-mm-dd格式以用于数据库，但是我无法在datepicker输入中显示dd / mm / yyyy格式。您能帮我在数据选择器字段中显示澳大利亚日期格式而不是美国日期格式吗？

我是否出于数据库目的发送dateformat的一种好习惯？

.TS文件

1
2
3
4

date: string;

setDate(date: string) {
this.date = date ? date : 'y-MM-dd';

.HTML文件

1 2	input matInput [matDatepicker]="picker" placeholder="select a date" (dateChange)="setDate($event.value)">

和

1	<input type="hidden" matInput value="{{ date \| date: 'y-MM-dd' }}">

我建议您不要以这种方式自定义Date变量，

您应该定义您的LOCALE_ID，这意味着您不需要为Date(或货币，时间等)变量使用自定义格式。例如，

1
2
3
4
5
6
7

import { LOCALE_ID } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule, {
providers: [{provide: LOCALE_ID, useValue: 'en-US' }]
});

资料来源：https://angular.io/api/core/LOCALE_ID#description