角度日期选择器和日期格式答案

【问题标题】：angular datepicker and date format角度日期选择器和日期格式
【发布时间】：2018-12-31 19:30:44
【问题描述】：

我在正确使用 angular5 的日期时遇到了一些问题

我从生成日期的模拟 api 中获取数据： 24/07/2018 00:00:00 所以研究或任何操纵这些日期的东西都没有问题。

api mock 生成示例：

 for (int i = 1; i <= NUMBER_OF_POLICIES; i++)
            {
                Policy lPolicy = new Policy { Id = i, Name = string.Concat("Policy number ", i), Date = DateTime.Now.AddDays(i) };

                p.Add(lPolicy);
            }

当我使用 Angular Material DatePicker 组件更新日期时出现问题。

使用选择器，日期显示如下：

Mon Jul 30 2018 00:00:00 GMT+0200

所以当我更新项目时，日期是这样传递的：

updated item: {"id":1,"name":"Policy number 1","date":"2018-07-29T22:00:00.000Z"}

知道如何处理语言环境吗？

编辑：

这是我做一些研究时的问题：

【问题讨论】：

使用角度滤镜
您希望如何显示日期？你想要什么格式？
helle @SaurabhAgrawal，你的意思是像 {{ today |日期 }}？如果是这样，可以显示日期，但不能操纵它：/例如，如果我将日期更新为 31/07/2018，它将正确显示在浏览器中，但如果我使用“搜索”栏查找2018 年 7 月 31 日，我没有收到该商品。要得到它，即使显示在 2018 年 7 月 31 日，我也必须搜索 30/07/2018
您可以将 DatePipe 注入到您的组件中，并根据需要使用它来操作日期
我刚刚编辑了我的帖子，因此您可以实际看到结果：policy1 和 2 已使用 DatePicker 进行了更新

标签： angular date datepicker

【解决方案1】：

 const offset = p.date.getTimezoneOffset();
 const test = p.date.setMinutes(p.date.getMinutes() - offset);

console.log(test) 返回：

updated item: {"id":1,"name":"Policy number 1","date":"2018-07-31T00:00:00.000Z"}

它也可以，但是那是“干净”的吗？

【讨论】：

【解决方案2】：

您可以在组件本身中使用DatePipe，并使用pre-defined-format-options格式化日期

试试这个

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

class Service {    
  constructor(private datePipe: DatePipe) {}    
  changeDate(date) {
    return this.datePipe.transform(date, 'yyyy-MM-dd');
  }
}

或者你也可以像这样格式化日期

var formatted = new DatePipe().transform(raw, 'yyyy-MM-dd');

【讨论】：

Mh，我在尝试在构造函数中注入 DatePipe 时遇到问题。我收到以下错误：ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[DatePipe]: StaticInjectorError(Platform: core)[DatePipe]: NullInjectorError: No provider for DatePipe!
很好，它似乎有效！谢谢@Saurabh！但这意味着我必须手动将本地传递到管道中，对吗？比如：const formatted = new DatePipe('en-EN').transform(p.date, 'yyyy-MM-dd'); 那么国际化呢？
@j0w 试试这个文档angular.io/guide/i18n.. 希望它会帮助你。
我一定会的！ :) 如果您能告诉我我发布的答案是否也是一个可行的解决方案，以及为什么我应该使用一个而不是另一个，那将对我有很大帮助！谢谢你的时间！ :)
当然我会给我一些时间。我喜欢你的敬业精神。明天我会回答你这个问题。

【解决方案3】：

使用 moment 作为日期和时间，它提供了必要的格式。

https://momentjs.com/

momentjs 有不同的属性来获取必要格式的时间和日期。

newDate = this.Today

日期 = 时刻（this.newDate）

您还可以传递必要的格式，例如

date = moment(this.newDate).format('DD/MM/YYYY')

【讨论】：