本文详细介绍了在 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
立即学习“Java免费学习笔记（深入）”；
可以通过 npm 或 yarn 安装 date-fns：
npm install date-fns# 或者yarn add date-fns
或者，你也可以直接通过 CDN 引入：
基本用法
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 = ` ${user.procode} ${user.proname} ${user.unit} ${user.cat_name} ${user.quantity} ${user.update_by} ${formattedDate} // 使用格式化后的日期 `; tableBody.appendChild(row); }); });
注意事项
确保 date-fns 库已正确安装或引入。new Date() 可以解析 ISO 8601 格式的日期字符串，例如 2023-05-12T09:14:34.742+00:00。根据实际需求选择合适的格式字符串。如果需要处理时区问题，date-fns 也提供了相应的函数。
总结
date-fns 库提供了一种简单而强大的方式来格式化 JavaScript 中的日期时间。通过灵活的格式字符串，可以轻松地将日期时间数据转换为各种自定义格式，满足不同的展示需求。在处理 API 返回的日期时间数据时，date-fns 是一个非常有用的工具。
以上就是JavaScript 中日期时间格式化详解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1512799.html
微信扫一扫 
支付宝扫一扫 
