как показать австралийский формат даты в Angular 7? - PullRequest
0 голосов
/ 11 апреля 2019

Я использую DatePicker, и у меня есть следующий код:

    <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' }}">

В этом примере DatePicker есть формат даты США.Я хотел бы использовать австралийский формат даты - дд / мм / гггг.Я могу создать скрытый ввод и преобразовать его в формат гггг-мм-дд для целей базы данных, но не могу показать формат дд / мм / гггг во входных данных DatePicker.Не могли бы вы помочь мне показать австралийский формат даты вместо формата даты в США в поле datapicker?

Также рекомендуется ли отправлять формат даты для целей БД?

.Файл 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 ]

2 голосов
/ 11 апреля 2019

Я рекомендую вам не настраивать ваши 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

0 голосов
/ 11 апреля 2019

в вашем NgModule вы хотите назначить австралийскую локаль для LOCALE_ID ....

в поставщиках в вашем NgModule добавьте следующее ...

{предоставить: LOCALE_ID, useValue: 'en-au'}

(убедитесь, что вы импортируете LOCALE_ID).

...