在web开发中，日期和时间的显示格式通常需要根据用户习惯或业务需求进行调整。当mysql数据库中存储的日期为yyyy-mm-dd格式（例如2022-06-27），而前端html页面需要显示为dd mmm yyyy（例如27 jun 2022）时，我们有多种策略可以实现这一转换。本教程将深入探讨这些策略，并提供推荐的最佳实践。
理解日期格式化需求
MySQL数据库通常以标准化的格式存储日期和时间，如DATE类型的YYYY-MM-DD或DATETIME/TIMESTAMP类型的YYYY-MM-DD HH:MM:SS。这种标准化存储有利于数据的一致性、查询效率和国际化。然而，直接将数据库中的原始格式展示给用户，可能不符合用户阅读习惯。因此，我们需要在数据从数据库取出后，于显示层进行格式转换。
后端PHP处理方案
一种直接的方法是在服务器端使用PHP进行日期格式转换。PHP提供了强大的日期时间处理函数，可以将数据库中获取的日期字符串转换为时间戳，然后再格式化为目标字符串。
示例代码：
假设我们从MySQL查询结果中获取到CREATED_AT字段，其值为2022-06-27。
立即学习“PHP免费学习笔记（深入）”；
<?php
// 假设 $checkSqlRow["CREATED_AT"] 的值为 '2022-06-27'
$dateFromDb = $checkSqlRow["CREATED_AT"];
// 1. 将日期字符串转换为Unix时间戳
// strtotime() 能够识别多种日期时间格式，并将其转换为时间戳
$timestamp = strtotime($dateFromDb);
// 2. 使用 date() 函数将时间戳格式化为目标字符串
// 'd' 代表日期 (01-31)
// 'M' 代表月份缩写 (Jan-Dec)
// 'Y' 代表四位年份
$formattedDate = date('d M Y', $timestamp); // 输出例如 '27 Jun 2022'
?>
<!-- 在HTML表格中显示格式化后的日期 -->
<td><?php echo $formattedDate; ?></td>优点：
- 实现简单，无需前端JavaScript支持。
- 适用于对日期格式要求不复杂且统一的场景。
缺点：
- 服务器端处理会增加PHP的计算负担，尤其是在大量日期需要格式化时。
- 难以实现基于用户区域设置的本地化日期显示。
- 如果前端需要不同格式的日期，需要多次从后端请求或后端返回多种格式。
前端JavaScript处理方案（推荐）
为了提供更灵活、更高效且用户体验更好的日期显示，推荐在前端使用JavaScript进行日期格式化。这种方法遵循了“让用户设备处理信息”的原则，减轻了服务器负担，并能更好地支持本地化。
核心思想： 从数据库中获取原始的日期/时间数据，将其传递到前端（可以作为HTML元素的data属性），然后使用JavaScript库或原生API在客户端进行格式化。
引入Moment.js库
Moment.js是一个功能强大且广泛使用的JavaScript日期处理库，它提供了丰富的API来解析、验证、操作和格式化日期。虽然Moment.js目前处于维护模式，不再推荐用于新项目（Day.js或原生Intl.DateTimeFormat是更好的现代替代品），但其在现有项目中的普及率和易用性使其仍然是值得了解的工具。
1. 引入Moment.js库： 可以通过CDN或NPM安装。在HTML文件的zuojiankuohaophpcnhead>或<body>底部引入：
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
2. HTML结构与PHP输出： 在PHP中，我们将原始日期输出到一个自定义的data属性中，而不是直接显示。
<!-- 假设 $checkSqlRow["CREATED_AT"] 的值为 '2022-06-27' 或 '2022-06-27 10:30:00' -->
<td class="date-display" data-raw-date="<?php echo $checkSqlRow["CREATED_AT"]; ?>">
<!-- 这里可以留空，或放置一个加载指示器 -->
</td>3. JavaScript格式化： 使用Moment.js读取data-raw-date属性的值，然后进行格式化。
<script>
document.addEventListener('DOMContentLoaded', function() {
// 遍历所有带有 'data-raw-date' 属性的 td 元素
document.querySelectorAll('td[data-raw-date]').forEach(function(td) {
const rawDate = td.getAttribute('data-raw-date');
if (rawDate) {
// 使用 Moment.js 解析日期并格式化
// 'DD' 代表两位日期，'MMM' 代表月份缩写，'YYYY' 代表四位年份
const formattedDate = moment(rawDate).format('DD MMM YYYY');
td.textContent = formattedDate;
}
});
});
</script>优点：
- 减轻服务器负担： 日期格式化逻辑在客户端执行，减少了服务器的CPU使用。
- 高度灵活性： 可以根据用户浏览器设置、语言偏好等，动态调整日期显示格式。
- 更好的用户体验： 页面加载后可以快速渲染原始数据，然后通过JavaScript进行异步格式化，或者在页面加载完成后一次性处理。
- 支持本地化： Moment.js（及其他现代日期库）提供了强大的本地化功能。
数据库设计最佳实践
在数据库层面，最佳实践是存储完整的日期和时间信息，而不是只存储日期或预先格式化好的字符串。
推荐：使用 DATETIME 或 TIMESTAMP 类型
- DATETIME： 存储日期和时间，范围从1000-01-01 00:00:00到9999-12-31 23:59:59。不自动处理时区。
- TIMESTAMP： 存储日期和时间，范围从1970-01-01 00:00:01 UTC到2038-01-19 03:14:07 UTC。它会根据MySQL服务器的时区设置进行存储和检索的自动转换。
示例：创建包含 DATETIME 字段的表
CREATE TABLE exampleSchema (
game_id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) DEFAULT '' NOT NULL,
code VARCHAR(255) DEFAULT '' NOT NULL,
created DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL, -- 记录创建时间
modified DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP NOT NULL -- 记录修改时间，并自动更新
) ENGINE = InnoDB;优点：
- 数据完整性： 存储完整的时间戳，有助于调试、审计和数据分析。
- 通用性： 完整的时间戳可以随时转换为任何所需的日期或时间格式，而不会丢失信息。
- 灵活性： 在需要显示时间信息时，无需修改数据库结构或进行额外查询。
- 内存优化： DATETIME和TIMESTAMP类型在MySQL中通常比存储格式化字符串更节省空间。
注意事项与总结
- 时区处理： 如果您的应用程序面向全球用户或涉及多个时区，时区管理至关重要。TIMESTAMP类型在MySQL中会自动进行时区转换，而DATETIME则不会。在前端处理时，Moment.js等库也能很好地处理时区转换。
- 库的选择： 尽管Moment.js非常流行，但对于新项目，建议考虑使用更轻量级且仍在积极维护的库，如Day.js，或者利用原生JavaScript的Intl.DateTimeFormat API，它提供了强大的国际化日期格式化能力。
- 性能考量： 对于非常大的数据集，即使是客户端处理，也需要注意DOM操作的效率。可以考虑虚拟滚动或分页加载，以减少一次性处理的元素数量。
- 优雅降级： 如果依赖JavaScript进行格式化，请考虑在JavaScript禁用时如何显示日期。可以在<td>中预先放置原始日期或一个简单的格式，然后由JavaScript替换。
总结： 将MySQL数据库中的日期格式化为用户友好的dd mmm yyyy形式，最佳实践是结合数据库存储完整时间戳、PHP后端传递原始数据以及前端JavaScript进行灵活格式化。这种方法不仅减轻了服务器负担，还提供了卓越的灵活性和用户体验，尤其是在需要支持国际化和个性化日期显示时。
