Datepicker не отображает формат даты ММ / ДД / ГГГГ угловой 4

Question

В моем проекте Angular 4 у меня есть указатель даты в моем html.

В html:

      <mat-form-field class="col-sm-12 nopadding pull-left">
         <input matInput [matDatepicker]="date" placeholder="Please select a date" [(ngModel)]="txtDate">
         <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
         <mat-datepicker #date></mat-datepicker>
      </mat-form-field>

Я могу выбрать дату и преобразовать ее в формат дд / мм / ггггв моей БД.Когда я получаю дату, я конвертирую ее обратно в MM / DD / YYYY (формат, в котором работает мой указатель даты). Я получаю значение из web api, и в консоли я вижу, что значение правильно преобразовано и присвоено ngModel.Но он не отображается в поле DatePicker

В файле TS

 var dateParts = result.Date.split("/");
 var dateObject = new Date(dateParts [2], dateParts [1] - 1, dateParts [0]);
 this.txtDate=moment(dateObject ).format('MM/DD/YYYY'); -- output of this in console is 11/14/2018 (the desired output)

, но не отображается в окне выбора даты.не могли бы вы помочь !!

Answer 1

Я бы скорее предложил вам создать собственную трубу:

[(ngModel)]="txtDate | dateformatter:'MM/DD/YYYY'"   

import {
  Pipe,
  PipeTransform
} from '@angular/core';

@Pipe({ name: 'dateformatter' })
export class DateFormatterPipe implements PipeTransform {
  transform(value: number, dateformat: string): string {
    var dateParts = result.Date.split("/");
    var dateObject = new Date(dateParts [2], dateParts [1] - 1, dateParts [0]);
    return moment(dateObject).format(dateformat.toUpperCase());
  }
}

---

Или вы можете взглянуть на date трубу:

[(ngModel)]="txtDate | date:'shortDate'"   

Answer 2

, поскольку нет минимального воспроизводимого кода, который вы предоставили, я просто просмотрел документацию Angular Material и обнаружил, что вам нужно преобразовать дату в формат ISOString. вот код из stackbliz