当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript日期格式化技巧大全

JavaScript日期格式化技巧大全

2025-08-03 22:45:33 0浏览收藏

还在为 JavaScript 日期格式化烦恼吗？本文为你带来 **JavaScript 日期格式化全解析**，重点讲解如何使用强大的 `date-fns` 库，轻松将 API 返回的各种日期时间字符串，例如 `2023-05-12T09:14:34.742+00:00`，转换为你想要的格式，例如 `2023-05-15 09:14:34 am`。文章提供详细代码示例和步骤，手把手教你掌握 `date-fns` 的安装、基本用法，以及如何将其集成到你的项目中，格式化 `update_date` 等字段。告别繁琐的日期处理，提升前端开发效率，快来学习吧！

JavaScript 中日期时间格式化详解

本文详细介绍了在 JavaScript 中格式化日期时间的方法，重点讲解了如何利用 date-fns 库将 API 返回的日期时间字符串转换为自定义格式，例如将 2023-05-12T09:14:34.742+00:00 转换为 2023-05-15 09:14:34 am。文章提供了详细的代码示例和步骤说明，帮助开发者轻松掌握日期时间格式化的技巧。

在前端开发中，经常需要处理从后端 API 获取的日期时间数据，并将其按照特定的格式展示在页面上。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 src="https://cdn.jsdelivr.net/npm/date-fns@2.0.0-alpha.7/date_fns.min.js"></script>

基本用法

date-fns 库的核心函数是 format，它接受一个 Date 对象和一个格式字符串作为参数，返回格式化后的日期时间字符串。

import { format } from 'date-fns';

const date = new Date();
const formattedDate = format(date, 'yyyy-MM-dd HH:mm:ss');
console.log(formattedDate); // 输出：2023-10-27 10:30:00 (示例)

格式字符串

format 函数的第二个参数是格式字符串，它定义了日期时间的输出格式。date-fns 提供了丰富的格式化选项，常用的包括：

yyyy: 年 (四位数)
MM: 月 (两位数)
dd: 日 (两位数)
HH: 小时 (24小时制, 两位数)
hh: 小时 (12小时制, 两位数)
mm: 分钟 (两位数)
ss: 秒 (两位数)
a: AM/PM

更多格式化选项可以参考 date-fns 的官方文档。

示例：格式化 API 返回的日期时间

假设 API 返回的日期时间字符串是 2023-05-12T09:14:34.742+00:00，需要将其格式化为 2023-05-15 09:14:34 am。

import { format } from 'date-fns';

const apiDateString = '2023-05-12T09:14:34.742+00:00';
const date = new Date(apiDateString);
const formattedDate = format(date, 'yyyy-MM-dd hh:mm:ss a');
console.log(formattedDate); // 输出：2023-05-12 09:14:34 AM

集成到你的代码中

结合你的代码示例，可以这样格式化 update_date：

 fetch('http://localhost:8082/list/findbyid/'+id+'/'+productid)
          .then(response => response.json())
          .then(data => {
            const tableBody = document.getElementById('dataInven');
            data.forEach(user => {
              const row = document.createElement('tr');
              const formattedDate = format(new Date(user.update_date), 'yyyy-MM-dd hh:mm:ss a'); // 格式化日期

              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>${formattedDate}</td>  // 使用格式化后的日期
              `;
              tableBody.appendChild(row);
            });

          });

注意事项