如何在Ruby on Rails应用中集成dayjs并实现客户端时区时间转换

1. 依赖校验&插件补充 #

你当前引入的是dayjs核心包，不需要额外插件就可以完成基础的客户端时区时间转换，核心包默认会读取浏览器的本地时区进行解析。如果你后续需要自定义时区偏移、多时区切换等进阶功能，再引入对应utc和timezone插件即可，当前场景不需要额外引入。

2. ERB视图层编写 #

在你的.html.erb文件中，输出时间时统一加timestring类，并且输出ISO8601格式的标准时间字符串，避免dayjs解析出现兼容性问题，更推荐用data属性存储原始时间，避免用户看到未转换的格式：

<!-- 示例：假设模型为Order，datetime字段为pay_time -->
<div class="timestring" data-raw-time="<%= @order.pay_time.iso8601 %>" style="visibility: hidden;"></div>

3. application.js逻辑优化 #

调整逻辑确保DOM加载完成后再执行，适配Rails常用的Turbo/Turbolinks场景：

// 无Turbo场景用DOMContentLoaded，有Turbo场景换成turbo:load
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.timestring').forEach(el => {
    const rawTime = el.dataset.rawTime;
    // 可自定义format格式，比如'YYYY年MM月DD日 HH:mm'
    el.textContent = dayjs(rawTime).format('YYYY-MM-DD HH:mm:ss');
    el.style.visibility = 'visible';
  })
})

习惯用jQuery的写法也可以调整为：

$(function() {
  $('.timestring').each(function() {
    const rawTime = $(this).data('raw-time');
    $(this).text(dayjs(rawTime).format('YYYY-MM-DD HH:mm:ss')).css('visibility', 'visible');
  })
})

4. 加载逻辑校验 #

确认全局布局文件app/views/layouts/application.html.erb中已经引入了application.js包：

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

你之前写的require("packs/dayjs.min.js")在Rails webpacker/jsbundling架构下可以正常生效，不需要额外调整。

内容的提问来源于stack exchange，提问作者Lemon