如何在Angular 7中显示澳大利亚日期格式?

时间:2019-04-11 12:59:54

标签: angular typescript datepicker angular-material

我正在使用日期选择器,并且有以下代码:

    <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文件

  date: string;

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

.HTML文件     

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

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

2 个答案:

答案 0 :(得分:2)

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

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

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

答案 1 :(得分:0)

您要在NgModule中为LOCALE_ID分配澳大利亚语言环境。...

在NgModule的提供程序中添加以下内容...

{提供:LOCALE_ID,useValue:'en-au'}

(确保您导入LOCALE_ID)。