如何在Angular 7中显示澳大利亚日期格式? [英] how to show Australian date format in Angular 7?

问题描述

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

I am using datepicker and I have the following code:

    <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格式.您能帮我在数据选择器字段中显示澳大利亚日期格式而不是美国日期格式吗?

In this datepicker example there is a US date format. I would like to use Australian date format which is dd/mm/yyyy. I am able to create a hidden input and convert it to yyyy-mm-dd format for database purposes but I am unable to show dd/mm/yyyy format in the datepicker input. Could you please help me to show Australian date format instead of US date format in the datapicker field?

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

Also Is it a good practice the way I am sending the dateformat for DB purposes?

.TS文件

  date: string;

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

.HTML文件

.HTML file

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

和

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

推荐答案

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

I recommend you to not customize your Date variables it in that way,

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

You should define your LOCALE_ID which means that you don't need to use custom format for your Date (or currency, time etc.) variables. For example,

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

这篇关于如何在Angular 7中显示澳大利亚日期格式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！