Angular 6的日期选择器[重复]答案

【问题标题】：Date Picker For Angular 6 [duplicate]Angular 6的日期选择器[重复]
【发布时间】：2020-10-20 17:07:45
【问题描述】：

我正在尝试将日期输入格式化为仅显示 yyyy/MM/dd。我从 API GET 调用中获取日期，该调用在响应正文中将日期作为 yyyy-MM-ddThh:mm:ss.ms+Z 返回为 Json

{... date: "2020-06-30T08:04:11.9775152+02:00" ...} //ommited for brevity

我的输入是双向的

<input type="date" [(ngModel)]="date">

但是input 的值仍然是yyyy/MM/dd。关于如何在 HTML/TS 端正确格式化日期的任何想法？

【问题讨论】：

value 的 input type="date" 始终采用 ISO 8601 格式。您不能格式化 input type="date" 中显示的日期。

标签： html angular typescript date

【解决方案1】：

首先要知道，你不能在模板语句上使用管道，这意味着你不能做[(ngModel)]="date | date 'yyyy/MM/dd'"。因此，在您的情况下，您需要拆分两个模板。

这是一个工作示例

<input [ngModel]="date | date:'yyyy/MM/dd'" (ngModelChange)="date = $event"/>

您的[ngModel] 模板将使用您想要的管道获取日期值，此处为yyyy/MM/dd，并且您的(ngModelChange) 模板将在您更新它时更改日期值。

【讨论】：

除非字符串是 ISO 8601 格式的日期（即 yyyy-mm-dd（带破折号）），否则不要使用 new Date(string)。对于任何其他格式，解析的成功将取决于浏览器/操作系统/区域设置。见Why does Date.parse give incorrect results?
哦，谢谢，不知道我已经编辑了帖子，而且我了解我的项目中的一些问题：$

【解决方案2】：

在.ts中编写如下代码

import { DatePipe } from '@angular/common';

constructor(private datePipe: DatePipe) { 
    }

  ngOnInit() {
//write format you want.
let dateFormat = 'yyyy/MM/dd';
let myDate = new Date('2020-06-30T08:04:11.9775152+02:00');
    this.date = datePipe.transform(myDate,dateFormat);

}

【讨论】：