当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript日期格式化方法详解

JavaScript日期格式化方法详解

2025-07-31 08:06:28 0浏览收藏

一分耕耘，一分收获！既然打开了这篇文章《JavaScript日期格式化教程详解》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

JavaScript日期时间格式化详解

本文旨在帮助开发者掌握在JavaScript中格式化日期时间的技巧。通过引入date-fns库，我们可以轻松地将API返回的日期时间字符串转换为更易读的格式，例如"yyyy-MM-dd hh:mm:ss a"。本文提供详细的代码示例，并解释了如何使用format()函数进行自定义格式化，帮助开发者高效处理日期时间数据。

在JavaScript开发中，处理日期和时间是常见的任务。从API获取的数据经常以特定的格式呈现，例如ISO 8601格式（如"2023-05-12T09:14:34.742+00:00"）。为了更好地展示这些数据，我们需要将其格式化为更友好的形式，例如"2023-05-12 09:14:34 AM"。

虽然JavaScript内置的Date对象提供了一些格式化方法，但它们的功能相对有限。为了更灵活地格式化日期时间，我们可以使用第三方库，例如date-fns。

使用 date-fns 进行日期时间格式化

date-fns 是一个现代化的JavaScript日期实用工具库，提供了丰富的日期时间处理函数，包括格式化、解析、计算等。它体积小巧，模块化设计，易于使用。

安装 date-fns

你可以通过 npm 或 yarn 安装 date-fns：

npm install date-fns
# 或者
yarn add date-fns

或者，直接使用 CDN 引入：

<script type="module">
  import { format } from 'https://esm.run/date-fns';
  // ...
</script>

格式化日期时间

date-fns 提供了 format() 函数，可以将 Date 对象格式化为指定的字符串。

以下是一个示例，演示如何将 ISO 8601 格式的日期时间字符串格式化为 "yyyy-MM-dd hh:mm:ss a" 格式：

import { format } from 'date-fns';

const isoDateString = "2023-05-12T09:14:34.742+00:00";
const date = new Date(isoDateString);
const formattedDate = format(date, "yyyy-MM-dd hh:mm:ss a");

console.log(formattedDate); // 输出: 2023-05-12 09:14:34 AM

代码解释：

首先，我们从 date-fns 库中导入 format 函数。
然后，我们定义一个 ISO 8601 格式的日期时间字符串 isoDateString。
使用 new Date(isoDateString) 将字符串转换为 Date 对象。
使用 format(date, "yyyy-MM-dd hh:mm:ss a") 将 Date 对象格式化为指定的字符串格式。
- yyyy：四位数的年份
- MM：两位数的月份 (01-12)
- dd：两位数的日期 (01-31)
- hh：12小时制的小时 (01-12)
- mm：两位数的分钟 (00-59)
- ss：两位数的秒数 (00-59)
- a：AM/PM 指示符

应用到你的代码

现在，我们可以将上述代码应用到你的 API 响应处理逻辑中。修改你的代码如下：

fetch('http://localhost:8082/list/findbyid/'+id+'/'+productid)
  .then(response => response.json())
  .then(data => {
    const tableBody = document.getElementById('dataInven');
    data.forEach(user => {
      const updateDate = new Date(user.update_date);
      const formattedUpdateDate = format(updateDate, "yyyy-MM-dd hh:mm:ss a");

      const row = document.createElement('tr');
      row.innerHTML = `
        <td>${user.procode}</td>
        <td>${user.proname}</td>
        <td>${user.unit}</td>
        <td>${user.cat_name}</td>
        <td>${user.quantity}</td>
        <td>${user.update_by}</td>
        <td>${formattedUpdateDate}</td>
      `;
      tableBody.appendChild(row);
    });
  });

修改说明：

在 data.forEach() 循环中，获取每个用户的 update_date。
使用 new Date(user.update_date) 将 update_date 转换为 Date 对象。
使用 format(updateDate, "yyyy-MM-dd hh:mm:ss a") 将 Date 对象格式化为指定的字符串格式，并将结果存储在 formattedUpdateDate 变量中。
将 formattedUpdateDate 插入到表格的元素中。

其他格式化选项

date-fns 提供了丰富的格式化选项，可以满足各种需求。以下是一些常用的格式化选项：

yyyy: 年 (例如: 2023)
yy: 年 (例如: 23)
MMMM: 月份全称 (例如: January)
MMM: 月份简称 (例如: Jan)
MM: 月份 (01-12)
M: 月份 (1-12)
dd: 日期 (01-31)
d: 日期 (1-31)
HH: 24小时制的小时 (00-23)
hh: 12小时制的小时 (01-12)
mm: 分钟 (00-59)
ss: 秒 (00-59)
SSS: 毫秒 (000-999)
a: AM/PM 指示符
EEEE: 星期几全称 (例如: Monday)
EEE: 星期几简称 (例如: Mon)

你可以组合这些选项来创建自定义的日期时间格式。例如，"MMMM dd, yyyy" 将会输出 "May 12, 2023"。

注意事项

确保你的 API 返回的日期时间字符串是有效的 ISO 8601 格式或其他 Date 对象可以解析的格式。
根据你的需求选择合适的格式化选项。
date-fns 是一个轻量级的库，但仍然会增加你的项目体积。如果你的项目对体积非常敏感，可以考虑使用其他更小的库，或者自己编写格式化函数。

总结

通过使用 date-fns 库，我们可以轻松地在 JavaScript 中格式化日期时间。format() 函数提供了灵活的格式化选项，可以满足各种需求。在处理 API 响应中的日期时间数据时，使用 date-fns 可以提高代码的可读性和可维护性。希望本教程能够帮助你更好地处理 JavaScript 中的日期时间格式化问题。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript日期格式化方法详解》文章吧，也可关注golang学习网公众号了解相关技术文章。