如何在 rails 应用程序的 ruby 中添加 dayjs？

Question

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

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

我不确定，也许我需要加载一些插件？我想知道如何为 .html.erb 时区内的客户转换日期时间属性？我没有找到任何使用示例，我很乐意提供任何帮助。在我的 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，就OK了！

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 个字段的 table 事件：name:string、starts_at:datetime.

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

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

$ 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);
});
})

将此 javascript 包含在 app/views/pages/home 中。html.erb

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' %>

路线config/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)
});
})

如何在 rails 应用程序的 ruby 中添加 dayjs？

how to add dayjs in ruby on rails application?

ruby-on-rails

dayjs