TypeScript(Angular) 日期时间到日期答案

【问题标题】：TypeScript(Angular) Datetime To DateTypeScript(Angular) 日期时间到日期
【发布时间】：2019-08-28 23:34:19
【问题描述】：

我收到了这个错误信息

指定值“2019-04-13T00:00:00”不符合所需格式，“yyyy-MM-dd”。

我想将日期/时间更改为日期。

日期时间示例：2019-04-13T00:00:00

我想做例子：2019-04-13

HTML

 <input
  class="form-control mr-sm-2"
  id="dates"
  name="achievement_date"
  [(ngModel)]="addItems.achievement_date"
  required
  type="date"
  placeholder="Tournament Date"
/>

【问题讨论】：

标签： angular typescript angular7

【解决方案1】：

这个实用功能我的帮助

export const getDate = function (date: any): Date {
  const _date = new Date(date);
  return new Date(
    Date.UTC(_date.getFullYear(), _date.getMonth(), _date.getDate())
  );
};

或基于格式返回字符串值的另一种方式'yyyy-MM-dd'

export const getDate = function (date: any): string{
  const _date = new Date(date);
  return `${_date.getFullYear()}-${_date.getMonth()}-${_date.getDate()}`;      
};

在保存日期之前，只需清理值

this.addItems.achievement_date = getDate(this.addItems.achievement_date);

【讨论】：

【解决方案2】：

提供的第一个解决方案很棒，因为它使用 Vanilla JavaScript 解决了您的解决方案！

但是，我还有另外两个替代解决方案。

1) 这利用了 Angular 的内置 DatePipe。您甚至可以传入各种 DateTime 格式。

import { DatePipe } from '@angular/common';
.
.
export class SampleComponent implements OnInit {   

  constructor(private datePipe: DatePipe) {
    this.addItems.achievement_date = datePipe.transform('2019-04-13T00:00:00', 'yyyy-MM-dd');
    // console.log(this.date)
  }

}

请记住将 DatePipe 导入到正在使用它的模块中的提供程序。

import { DatePipe } from '@angular/common';
.
.
@NgModule({
  .
  .,
  providers: [
    DatePipe
  ]
})

以上内容应在输入字段中显示日期。我使用上述解决方案制作了demo

2)formatDate。请注意，这可能不适用于早期版本的 Angular。到目前为止，我只在 Angular 7 上进行了尝试和测试。

import {formatDate } from '@angular/common';
.
.
export class AppComponent  {

  date = undefined;

  constructor() {
   this.date = formatDate('2019-04-13T00:00:00', 'yyyy-MM-dd', 'en-US');
  }

}

这里有另一个demo 给你。

【讨论】：

很棒的兄弟。迄今为止最好的解决方案