flatpickr 通过 rails importmap 未生成
flatpickr via rails importmap not being generated
正在尝试使用 flatpickr 作为 UI 来设置 Rails 7.0.1 和 ruby 3.1 的日期字段。单击输入字段时,未呈现预期的 2 个月日历,事实上,浏览器网络选项卡中未注册任何内容。
在 bin/importmap pin flatpickr
rails 将库固定到 importmap.rb
文件中的 cdn 后:
pin "flatpickr", to: "https://ga.jspm.io/npm:flatpickr@4.6.9/dist/flatpickr.js"
application.js
具有最初生成的 import "controllers"
.
flatpickr_controller.rb
是在 javascript/controllers 目录中创建的
import { Controller } from "@hotwired/stimulus"
import flatpickr from "flatpickr"
export default class extends Controller {
connect() {
this.config = {
enableTime: false,
dateFormat: 'Y-m-d',
}
}
}
视图部分调用:
<%= form_with model: promo do |f| %>
<%= f.text_field :date_from, placeholder: t(".select"), data: { controller: "flatpickr" } %>
<% end %>
同时控制器设置
@promos = Promo.up_comings(60)
@promo = Promo.new
@next_promo = Promo.next
@dates_to_disable = @promos.pluck(:date_from)
为什么日历没有呈现?
我也对在哪里放置不同的 flatpickr 选项感到困惑:在控制器中,或者直接放入表单日期元素中。
该问题与对 Stimulus 3 的支持有关。固定如下:
bin/importmap pin stimulus-flatpickr@beta
还参考了一些css来源,例如最新版本
<link rel="stylesheet" href="https://ga.jspm.io/npm:flatpickr@4.6.9/dist/flatpickr.min.css">
否则输入字段将被视为只读...
正在尝试使用 flatpickr 作为 UI 来设置 Rails 7.0.1 和 ruby 3.1 的日期字段。单击输入字段时,未呈现预期的 2 个月日历,事实上,浏览器网络选项卡中未注册任何内容。
在 bin/importmap pin flatpickr
rails 将库固定到 importmap.rb
文件中的 cdn 后:
pin "flatpickr", to: "https://ga.jspm.io/npm:flatpickr@4.6.9/dist/flatpickr.js"
application.js
具有最初生成的 import "controllers"
.
flatpickr_controller.rb
是在 javascript/controllers 目录中创建的
import { Controller } from "@hotwired/stimulus"
import flatpickr from "flatpickr"
export default class extends Controller {
connect() {
this.config = {
enableTime: false,
dateFormat: 'Y-m-d',
}
}
}
视图部分调用:
<%= form_with model: promo do |f| %>
<%= f.text_field :date_from, placeholder: t(".select"), data: { controller: "flatpickr" } %>
<% end %>
同时控制器设置
@promos = Promo.up_comings(60)
@promo = Promo.new
@next_promo = Promo.next
@dates_to_disable = @promos.pluck(:date_from)
为什么日历没有呈现?
我也对在哪里放置不同的 flatpickr 选项感到困惑:在控制器中,或者直接放入表单日期元素中。
该问题与对 Stimulus 3 的支持有关。固定如下:
bin/importmap pin stimulus-flatpickr@beta
还参考了一些css来源,例如最新版本
<link rel="stylesheet" href="https://ga.jspm.io/npm:flatpickr@4.6.9/dist/flatpickr.min.css">
否则输入字段将被视为只读...