1

尝试使用 flatpickr 作为 UI 来使用 Rails 7.0.1 和 ruby​​ 3.1 设置日期字段。单击输入字段时，未呈现预期的 2 个月日历，实际上，浏览器网络选项卡中未注册任何内容。

在bin/importmap pin flatpickrrails将库固定到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 选项的位置感到困惑：在控制器中，或直接放入表单日期元素中。

4

1 回答 1

0

该问题与对 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">
否则输入字段将被视为只读...

于 2022-01-21T12:03:00.080 回答