在 Vue 中使用 date-fns 格式化 ISO 日期（和其他格式）

Question

我正在尝试在 Vue 中使用 date-fns 格式化 ISO 日期：

2022-01-13T14:06:33.612Z
1988-06-22T08:03:20.098Z
2021-12-03T14:50:34.060Z

将它们格式化为 13.01.2022。在某些情况下（比如 10 个条目），我收到了以下格式：

1999-Dec-26

或

Wed Jan 05 2022 22:15:22 GMT+0100 (Central European Standard Time)

有时也会返回：

[Vue warn]: Error in v-on handler: "RangeError: Invalid time value"

我很惊讶 date-fns https://date-fns.org/docs/Getting-Started 没有检测格式的方法。 有什么建议么？ 提前致谢！

convertIso (date) {
  if (date !== "") {
    date = new Date(date);
    if (isValid(date) === true) {
      return format(date, "dd.MM.yyyy"); // 2022-01-13T14:06:33.612Z
    } else {
      if (isDate(date)) {
        const parseDate = parse(date, "yyyy-MMM-dd", new Date()); // 1999-Dec-26
        const formatDate = format(parseDate, "dd.MM.yyyy");
        // sometimes returns [Vue warn]: Error in v-on handler: "RangeError: Invalid time value"
        return formatDate;
      } else {
        return "";
      }
    }
  }
}

或

convertIso (date) {
  if (date !== "") {
    if (isValid(new Date(date)) === true)
      return format(new Date(date), "dd.MM.yyyy"); // 2022-01-13T14:06:33.612Z
    } else {
      if (isDate(date)) {
        const parseDate = parse(date, "yyyy-MMM-dd", new Date()); // 1999-Dec-26
        const formatDate = format(parseDate, "dd.MM.yyyy");
        // sometimes returns [Vue warn]: Error in v-on handler: "RangeError: Invalid time value"
        return formatDate;
      } else {
        return "";
      }
    }
  }
}

Answer 1

是的，在 JS 中处理日期是一团糟。无论如何，让我们一点一点解决问题。

在下面的行中，似乎 lib 没有进行任何实际的格式化，我猜由于某种原因它无法将日期参数读取为日期，所以我建议你首先解析它，就像你正在做的那样第二个 if 语句

if (isValid(date) === true) {
  return format(date, "dd.MM.yyyy"); // 2022-01-13T14:06:33.612Z
}

像这样。但考虑将格式从 'MMM' 更改为 'MM' 以获得 12 而不是 Dec

if (isDate(date)) {
  const parseDate = parse(date, "yyyy-MMM-dd", new Date()); // 1999-Dec-26
  const formatDate = format(parseDate, "dd.MM.yyyy"); // sometimes returns [Vue warn]: Error in v-on handler: "RangeError: Invalid time value"      
  return formatDate;
}

这将使您的日期采用您想要的正确格式 (13.01.2022)，但它不会修复 Vue 的错误“RangeError: Invalid time value”，因为您的格式只是一个日期，而不是 DateTime。您可以考虑将日期模式“dd.MM.yyyy”扩展为类似于“dd-MM-yyyy'T'HH:mm:ss.SSSxxx”以包含时间。

当然，您不必完全按照我的示例进行操作，也不必使用“T”。随心所欲地调整。只要确保 Vue 可以找到一些时间值来读取。

最后，我只想说我以前没有使用过这个库，所以如果我在这里在黑暗中拍摄的话。如果我遗漏了什么，请告诉我。

另外，如果您不太投入，我可以建议您使用day.js吗？我在这种情况下使用它，每次使用它都会带来愉快的体验。