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

Question

ngx-bootstrap 日期选择器的默认输出格式不是记录的 ISO 格式。
我会欢迎这种格式，但我得到的实际格式是：

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

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

Answer 1

在 vanilla JavaScript 中有一个 'Date' 对象，它的默认输出给你你看到的行：

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

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

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

与此同时，为了更具体地回答您的问题，您的日期选择器没有提供您列出的输出，而是将其日期应用于 'Date' 对象 (newDate)。然后，您将另一个“Date”对象 (updatedDate) 设置为等于日期选择器分配的 Date 对象 (新日期).

这是在这里完成的：

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

因此在内存中，您的更新日期现在表示为“1596410220000”毫秒。当您将“Date”对象输出到 HTML 时，您的浏览器将使用“Date”对象的默认输出，给你：

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

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

首先，您可以在 newDate 上调用一个方法来 return 一个不同格式的字符串。例如，如果我们想将其输出为您最初要查找的 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”（这是从我们的日期选择器中编辑的 return 日期）。这为我们提供了 ISO 格式的字符串，在我们的示例中为：

2020-08-02T23:17:00.000Z

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

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

为此：

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

我们将应用“h:mm a”的 shortTime 格式，或者对于我们的示例：

7:17 PM

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

总结：

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

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

ngx-bootstrap datepicker output format is not ISO format

datepicker

ngx-bootstrap

总结：