角度材料的日期选择器日期错误答案

【问题标题】：Wrong date with angular material's date picker角度材料的日期选择器日期错误
【发布时间】：2016-03-01 19:14:42
【问题描述】：

我使用日期选择器选择一个日期并将其发送到服务器。

当我记录 JS 值时，我得到了正确的结果：

Tue Mar 22 2016 00:00:00 GMT+0100 (Mitteleuropäische Zeit)

但在 ajax 请求中是

2016-03-21T23:00:00.000Z

我不修改值，只是将对象赋予 angulars http 函数。

Angular 是否需要一些配置来处理它？

【问题讨论】：

我发现将 ng-model-options="{timezone: 'utc'}" 添加到 md-date-picker 是一个很好的解决方案。
材质日期选择器如何解决？我刚试过{ provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }，但这对我不起作用。请求仍然如下所示：1997-12-23T23:00:00.000Z
嘿@Brendan，我无法应用这个。有什么想法吗？
您需要导入MatMomentDateModule 而不是MatNativeDateModule 才能工作{ provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }

标签： javascript angularjs datepicker angular-material

【解决方案1】：

你可以试试下面这段代码

dateObj.setMinutes((dateObj.getMinutes() + dateObj.getTimezoneOffset()));

无需本地化，在进行任何服务调用之前使用此代码。它会将您在日期选择器中选择的确切日期传递给您。

它适用于所有时区 (+) 和 (-)，

例如：2016-03-21 00:00:00 GMT+0100，上面说的代码将其转换为2016-03-21 01:00:00 GMT+0000。在服务时，它将其转换为2016-03-21 00:00:00。

我认为它会解决你的问题。

【讨论】：

试过这个技巧，当日期选择器字段没有任何值时它可以工作。但是，如果日期有值，例如 5 月 8 日，当我们在太平洋时区第一次编辑 datepicker 字段时，显示的值将是 5 月 9 日（提前 1 天）。有人可以帮忙吗？
@SukanyaPai - 我修改了答案，试试上面的答案。
也许我做错了什么，但没有你的方法，我有正确的日期作为控制台日志与 GMT+0100。现在我在 1 小时前和 GMT+0100 前一天得到，所以从 2019-06-13 00:00 到 2019-06-12 23:00，这导致了 2019-06-12 22:00 附带的请求

【解决方案2】：

这两个字符串代表相同的时间。一种是 UTC，即 GMT +0，您可以从 Z 结尾看到。另一个位于不同的时区，特别是 GMT +1 小时。

如果您有两个字符串的 javascript 日期对象，并将它们转换为整数，即自 1970 年 1 月 1 日（UTC）以来经过的秒数，您会发现它们是相同的。它们代表相同的即时，但位于两个不同的地理位置。

var d1 = new Date('Tue Mar 22 2016 00:00:00 GMT+0100');
var d2 = new Date('2016-03-21T23:00:00.000Z');

Number(d1);  // 1458601200000
Number(d2);  // 1458601200000

通常这是一件好事。时区交易变得非常混乱。我发现最好让服务器始终处理 UTC。

【讨论】：

我强烈建议你不要尝试。服务器可以存储 UTC，然后它可以将 UTC 发送回浏览器。 Javascript 可以从 UTC 时间构造一个 Date 对象，它会默认向用户显示一个本地化的时区，而无需您做任何事情。如果您真的必须在服务器上存储特定于时区的时区，则可以通过调用其.toString() 方法将值强制为字符串，然后再发送。

【解决方案3】：

https://github.com/angular/material/pull/9410

查看 1.1.1+ 版本。这将解决您的问题。

<md-datepicker ng-model="date" ng-model-options="{ timezone: 'utc' }"></md-datepicker>

【讨论】：

我想在 angular 2(+) 和 mat-datepicker 中执行相同的操作，有什么解决方案吗？提前致谢！

【解决方案4】：

如果假设我选择像Tue Aug 06 2019 00:00:00 GMT+0530 (India Standard Time) 这样的日期，
我会得到2019-08-05T18:30:00.000Z。（在我的情况下，相对于所选日期的前一个日期）
我利用toLocalDateString() 来完成这项工作。

    // this.date = 2019-08-05T18:30:00.000Z
    const converted = new Date(this.date).toLocaleDateString(); 
    console.log(converted); // 8/6/2019 (MM/DD/YYYY) format

【讨论】：