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

Posted

技术标签:

【中文标题】Datepicker 不显示日期格式 MM/DD/YYYY 角度 4【英文标题】:Datepicker not displaying date format MM/DD/YYYY angular 4 【发布时间】:2019-04-17 04:16:45 【问题描述】:

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

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

【问题讨论】:

【参考方案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'"   

【讨论】:

【参考方案2】:

由于您没有提供最小的可重现代码,我只是浏览了 Angular Material 文档,发现您需要将日期转换为 ISOString 格式。这是来自stackbliz的代码

【讨论】:

以上是关于Datepicker 不显示日期格式 MM/DD/YYYY 角度 4的主要内容,如果未能解决你的问题,请参考以下文章

从 DatePicker 以 yyyy/MM/dd 格式获取日期

角度材料2、将datepicker日期格式“MM/DD/YYYY”改为“DD/MM/YYYY”的奇怪行为

Bootstrap datepicker 显示的日期格式与值的格式不同

.NET datepicker 格式给出“MM-dd-yyyy”而不是“MM/dd/yyyy”

自定义 WPF DatePicker 掩码

角反应形式材料日期选择器手动输入格式DD/MM/YYYY