ruby-on-rails - 如何在 ruby​​ on rails 应用程序中添加 dayjs？

Question

我将此https://unpkg.com/dayjs@1.10.4/dayjs.min.js文件添加到 javascript/packs 和

require("packs/dayjs.min.js")

我不确定，也许我需要加载一些插件？我想知道如何在 .html.erb 上为他们的时区中的客户转换 datetime 属性？我没有找到任何使用示例，我很乐意提供任何帮助。在我的 application.js 中，我想使用一些东西作为

$('.timestring').each(function() {
  this.textContent = dayjs(this.textContent).format();
});

但我不知道如何在 erb + application.js 中实现它

Answer 1

我将 dayjs 添加到 Rail 6.1.3 的方式，首先运行命令：

$ yarn add jquery
$ yarn add dayjs

然后把这段代码写到 config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    dayjs: 'dayjs/dayjs.min'
  })
)
module.exports = environment

并调用它运行app/javascript/packs/application.js，一切都会好的！

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

require("jquery")
require("dayjs")

jQuery(function(){
  alert(dayjs().format('{YYYY} MM-DDTHH:mm:ss SSS [Z] A'))
})

奖励，示例使用 javascript 函数显示本地日期时间：创建表事件，包含 2 个字段：名称：字符串，starts_at：日期时间。

$ rails generate model Event name:string starts_at:datetime
$ rails db:migrate

运行 rails 控制台为 Event 模型创建伪造数据：

$ rails console
> Event.new(name: "Event 1", starts_at: Time.now).save
> Event.new(name: "Event 2", starts_at: Time.now).save
> Event.new(name: "Event 3", starts_at: Time.now).save
> Event.new(name: "Event 4", starts_at: Time.now).save

使用以下内容创建 app/javascript/packs/convert.js：

jQuery(function(){
  // alert(12345)
  $("span[data-utc-time]").each(function() {
    var timestamp = $(this).attr("data-utc-time");
    var localeTimestamp = new Date(timestamp).toLocaleString();
    $(this).html(localeTimestamp);
});
})

在 app/views/pages/home.html.erb 中包含这个 javascript

Welcome to project railstrace !
<% @events.each do |e| %>
  <p> <%= e.name %>: 
  <span data-utc-time="<%= e.starts_at %>">&nbsp;</span>
  </p>
<% end %>
<%= javascript_pack_tag 'convert' %>

路由配置/routes.rb

Rails.application.routes.draw do
 root to: "pages#home"
end

在 app/controllers/pages_controller.rb

class PagesController < ApplicationController
  def home
    @events = Event.all
  end
end

这只是使用简单 javascript 的示例，带有一些日期时间的高级处理，您可以使用 lib dayjs。

如果有任何问题，请告诉我，我会尽力帮助你，柠檬！

更新代码以使用 dayjs：

编辑文件 app/javascript/packs/convert.js 的内容：

jQuery(function(){
  //Extend dayjs plugin 
  var relativeTime = require('dayjs/plugin/relativeTime')
  dayjs.extend(relativeTime)
  // alert(dayjs().from(dayjs('2021-05-19 11:21:55 UTC'), true) )
  $("span[data-utc-time]").each(function() {
    var timestamp = $(this).attr("data-utc-time")
    var localeTimestamp = new Date(timestamp).toLocaleString()
    var fromNow = dayjs().from(dayjs(timestamp), true)
    var content = `Start at: ${localeTimestamp}. Ago: ${fromNow}`
    // $(this).html(localeTimestamp)
    $(this).html(content)
});
})