Блог

Я использую 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. Не могли бы вы помочь мне отобразить формат даты в Австралии вместо формата даты в США в поле выбора данных?

Также является ли хорошей практикой то, как я отправляю dateformat для целей DB?

файл .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 переменные таким образом,

Вы должны определить свой 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

в вашем NgModule вы хотите присвоить австралийский язык LOCALE_ID ….

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

{ предоставить: LOCALE_ID, использовать значение: ‘en-au’ }

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