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

问题描述

我正在使用 datepicker，我有以下代码:

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 格式以用于数据库目的，但我无法在日期选择器输入中显示 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?

此外，我发送用于数据库目的的日期格式的方式是否是一个好习惯?

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

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屋！