时间戳

首页 > 解决方案 > Datepicker 不显示日期格式 MM/DD/YYYY 角度 4

angular - Datepicker 不显示日期格式 MM/DD/YYYY 角度 4

问题描述

在我的 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>

我能够在我的数据库中选择日期并将其转换为 dd/mm/yyyy 格式。当我检索日期时，我将其转换回 MM/DD/YYYY（我的 datepicker 工作的格式），我从 web api 获取值，在控制台中我可以看到值被正确转换并分配给 ngModel。但它没有显示在日期选择器字段中

在 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)

但日期选择器中没有显示相同的内容。你能帮忙吗！！

标签： angulardatepicker

解决方案

我宁愿建议您创建一个自定义管道： 

[(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'"

推荐阅读