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

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

我将此 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中实现

解决方法

我将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 个字段的表事件：名称：字符串，开始时间：日期时间。

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

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