Angular Material 5 - Как настроить дату в mat-datepicker

Как настроить дату mat-datepicker в формате ММ / ДД / ГГГГ?

Я использую следующую конфигурацию:

HTML:

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

TS:

import {Component} from '@angular/core';

/** @title Basic datepicker */
@Component({
  selector: 'datepicker-overview-example',
  templateUrl: 'datepicker-overview-example.html',
  styleUrls: ['datepicker-overview-example.css'],
})
export class DatepickerOverviewExample {}

Когда я печатаю значение формы, я получаю следующий результат:

Вс, 31 декабря 2017 г., 00:00:00 GMT + 0530 (IST)

Я ожидаю формат в ММ / ДД / ГГГГ.

Я пробовал эту конфигурацию: https://material.angular.io/components/datepicker/overview#customizing-the-parse-and-display-formats.

Но у меня это не сработало. Я использую MatNativeDateModule по умолчанию (не момент js)


angular angular-material angular5
person Sahil Purav    schedule 31.12.2017    source источник
comment
MatNativeDateModule сохраняет дату как объект Date. Объект Date не имеет формата. Это объект, заключенный в несколько миллисекунд с 1970 года. Но вы можете отформатировать его так, как хотите, например, используя конвейер даты.   -  person JB Nizet    schedule 31.12.2017
comment
Попробуйте следующее: stackoverflow.com/questions/48396025/   -  person Shaip Zejnullahu    schedule 19.02.2018

Ответы (2)


arrow_upward
10
arrow_downward

Вы можете использовать Date Pipe следующим образом:

<input mdInput placeholder="Title" [ngModel]="mydate  | date:'MM-dd-yyyy'">

DEMO

person Sajeetharan    schedule 31.12.2017
comment
Спасибо. Когда я добавляю [ngMode] = mydate | дата: "ММ-дд-гггг" написано. Свойство mydate не существует для типа FormDateComponent. Не знаете, что здесь не так? - person Sahil Purav; 31.12.2017
comment
Я использовал здесь переменную mydate, вам нужно заменить ее на переменную вашей модели. отметьте, помог ли ответ - person Sajeetharan; 31.12.2017
comment
Спасибо за ответ. Я понял. Работает отлично :) - person Sahil Purav; 31.12.2017
comment
ngModel устарел, и мы вынуждены использовать formControlName вместо этого в Angular 6+. на этот вопрос нужен новый ответ или этот ответ требует обновления. - person tatsu; 06.09.2018
comment
в качестве дополнительной информации. formControlName существует только как статический параметр, вы не можете [formControlName]="myDate | date:'MM-dd-yyyy'" , вы вынуждены делать [formControlName]="myDate, где myDate является одним из сконструированных членов реактивных форм, поэтому это означает, что вам нужно выполнить конвейер на стороне машинописного текста, а я не знаю, как это сделать. - person tatsu; 06.09.2018

arrow_upward
8
arrow_downward

Приведенный ниже код отформатирует дату всех средств выбора даты в вашем приложении angular.

Создайте константу для формата даты.

export const DateFormat = {
 parse: {
 dateInput: 'input',
 },
display: {
dateInput: 'MM/DD/YYYY',
monthYearLabel: 'MMMM YYYY',
dateA11yLabel: 'MM/DD/YYYY',
monthYearA11yLabel: 'MMMM YYYY',
}
};

И используйте приведенный ниже код внутри модуля приложения

providers: [
  { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
  { provide: MAT_DATE_FORMATS, useValue: DateFormat }
 ]
person Mohan Singh    schedule 21.12.2018