ngx-bootstrap datepicker 输出格式不是 ISO 格式

Question

ngx-bootstrap datepicker 的默认输出格式不是文档中的 ISO 格式。
我会欢迎这种格式，但我得到的实际格式是：

2020 年 8 月 2 日星期日 19:17:00 GMT-0400（东部夏令时间）

Stackblitz Example

我知道有一些方法可以对格式进行后期处理，但这种格式对于默认输出格式来说似乎很奇怪。有人有这方面的经验吗？

Answer 1

在原生 JavaScript 中有一个“Date”对象，它的默认输出会为您提供您所看到的行：

Sun Aug 02 2020 19:17:00 GMT-0400 (Eastern Daylight Time)

在物理内存中，您的 Date 对象实际上存储为自“January 1, 1970, 00:00:00”以来的毫秒数，使用我们上面的行实际上是“ 1596410220000" 毫秒。

您可以在此处阅读“日期”对象的完整规范：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates

同时，为了更具体地回答您的问题，您的日期选择器不会给出您列出的输出，而是将其日期应用于“日期”对象（newDate）。然后，您将另一个“Date”对象 (updatedDate) 设置为与日期选择器 (newDate) 分配的 Date 对象相同。

这是在这里完成的：

onValueChange(newDate: Date) {
    this.updatedDate = newDate;
}

因此，在内存中，您的 updatedDate 现在表示为“1596410220000”毫秒。当您将 'Date' 对象输出到 HTML 时，您的浏览器将使用 'Date' 对象的默认输出，从而为您提供：

Sun Aug 02 2020 19:17:00 GMT-0400 (Eastern Daylight Time)

因此，如果您想将该日期转换为不同的格式，可以使用两种解决方案。

首先，您可以在 newDate 上调用一个方法来返回不同格式的字符串。例如，如果我们想将其输出为您最初寻找的 ISO 字符串我们更改此：

export class AppComponent implements OnInit  {
  myDateValue: Date;
  updatedDate: Date;

  ngOnInit() {
    this.myDateValue = new Date();
  }

  onValueChange(newDate: Date) {
    this.updatedDate = newDate;
  }

至此：

export class AppComponent implements OnInit  {
  myDateValue: Date;
  updatedDate: String;

  ngOnInit() {
    this.myDateValue = new Date();
  }

  onValueChange(newDate: Date) {
    this.updatedDate = newDate.toISOString();
  }

首先我们将“updatedDate”更改为字符串对象，并在“newDate”上调用方法“toISOString()” （这是从我们的日期选择器返回的日期）。这为我们提供了 ISO 格式的字符串，在我们的示例中是：

2020-08-02T23:17:00.000Z

另一种选择是简单地将格式应用于您的角度 DatePipe 中的日期。例如，如果我们改变这个：

</div>
   Updated Date: {{updatedDate}}
</div>

至此：

</div>
   Updated Date: {{updatedDate | date:"shortTime"}}
</div>

我们将应用短时间格式，即“h:mm a”或在我们的示例中：

7:17 PM

您可以在此处阅读角度日期格式的完整列表：https://angular.io/api/common/DatePipe

总结一下：

Vanilla JavaScript（不是 Angular 或 ngx-bootstrap）在这里控制“Date”对象的输出格式。虽然输出看起来很奇怪，但变量本身并未以该格式存储，而是以毫秒为单位（UNIX 纪元时间）。您可以调用 Date 对象上的方法来获取各种格式（包括 ISO、UTC 等），或者您可以通过沿日期管道传递格式命令来从角度格式化。