如何将 jQuery Datepicker 连接到我的 Ruby on Rails 表单？

Posted 2023-05-07

【中文标题】如何将 jQuery Datepicker 连接到我的 Ruby on Rails 表单？

【英文标题】：How do I connect jQuery Datepicker to my Ruby on Rails form?

【发布时间】：2011-03-20 18:04:11

【问题描述】：

我正在尝试使用 jQuery Datepicker 在我的 Ruby on Rails 表单中设置日期字段，但我不知道该怎么做。有人能指出我正确的方向吗？

【参考方案1】：

我已经构建了一个 gem 来处理这个问题：

https://github.com/albertopq/jquery_datepicker

希望它对其他人有所帮助。

【讨论】：

如果您启用了资产管道，这似乎不起作用，因为除非您禁用管道，否则您无法按照插件要求的方式安装 jquery。

我已经更新了 gem。它现在应该可以在管道上正常工作了。

github.com/joliss/jquery-ui-rails 将是当前更好的选择，因为您可以选择要包含的模块。您的 gem 似乎包含整个 ui 库。喜欢你的时间选择器扩展！

【参考方案2】：

Ryan Bates 对所有这一切都有很好的解释：

http://railscasts.com/episodes/213-calendars（旧版可免费观看） http://railscasts.com/episodes/213-calendars-revised（修改版需要订阅才能观看）

【讨论】：

谢谢，通过那个链接我解决了两个问题。我希望我有时间观看所有的轨道。

如果我们想添加一个混乱的日期月日年，那就太棒了。

本集有更新版本，见修改版：railscasts.com/episodes/213-calendars-revised

【参考方案3】：

到目前为止，我建议将 jquery-ui-rails gem 置于其他答案之上，原因很简单，您可以只包含 datepicker 资产而不包含整个 jquery ui 库！

https://github.com/joliss/jquery-ui-rails

【参考方案4】：

我使用了 albertopq 提到的 albertopq 的 jquery_datepicker，它适用于常规形式、嵌套属性等。这对我来说很容易。 jquery_datepicker 还正确地将选项传递给 datepicker 的必要 javascript 调用。

这是我的一个嵌套表单的示例：

<%= f.datepicker 'availability', :minDate => 0, :maxDate => "+8Y", :tab_index => autotab %>

minDate 和 maxDate 被传递给 datepicker，tab_index 被放入文本字​​段 html。 （autotab 只是我推进 tab + 1 的表单助手...对我来说比硬编码更好）。

【参考方案5】：

Rails 5.x 更新

步骤 1. 安装 jquery-ui-rails gem

# gemfile
gem 'jquery-ui-rails'

# app/assets/javascripts/application.js
//= require jquery-ui/widgets/datepicker

# app/assets/stylesheets/application.css
*= require jquery-ui/datepicker

第 2 步。假设您有一个名为 Event 的资源，其中包含一个名为 :start 的日期或日期时间字段，然后在表单中将 :start 字段设为文本字段。

# app/views/events/_form.html.erb
<%= f.label :start, 'Start Date' %>
<%= f.text_field :start %>

第 3 步。添加 Javascript（此处为 CoffeeScript 语法）。 Line1）如果您启用了 Turbolinks（当您通过 AJAX 加载链接单击链接时，Turbolinks 会加速 Rails 页面加载）您需要添加一个包装器，否则当您从内部链接导航到页面时 JavaScript 函数将不会加载.

Line2) 您的目标是表单中的元素 ID。 Rails 通过结合模型名称和字段名称自动为表单输入分配一个 id。

Line3) 您需要设置 dateFormat，因为 jQuery-UI 和 Rails 使用不同的默认日期格式。

# app/assets/javascripts/event.coffee
$(document).on 'turbolinks:load', ->
  $('#event_start').datepicker
    dateFormat: 'yy-mm-dd'

对于 Rails 4，除了 JavaScript（或 CoffeeScript）文件中的第一行之外，一切都相同。在 Rails 4 中启用 Turbolinks 时加载 JavaScript 的包装器是：

$(document).on "page:change", ->

【讨论】：

你能添加一个 Rails 4 的例子吗？我正在将应用程序从 3 更新到 4 并且 jquery_datepicker 停止工作，所以我将使用您的解决方案。如果我在 rails 4 中使用 turbolinks gem，这个解决方案应该对我有用吗？

DJTripleThreat - 对于 Rails 4，除了使用 Turbolinks 执行的 JavaScript（或在本例中为 CoffeeScript）包装器之外，一切都将相同。我已经编辑了上面的答案以添加更改。

我现在正在处理这个确切的问题，并使用脚手架设置一个简单的虚拟应用程序 - 运行 rails 5.0.3 - 我得到一个 ActionController Exceiption 它找不到 datpicker 小部件。 ..

确实找到了解决问题的信息here - 您可能无法再添加特定的小部件 - 如果您只需要整个 ui，则示例有效

【参考方案6】：

如果使用 Rails 3.0+，除了包含 jQuery 和 jQuery UI，你不需要做任何事情，因为 jQuery 是默认的 JavaScript 框架。

如果使用早于 3.0 的 Rails 或使用 Prototype（或其他），则需要在 noConflict 模式下使用 jQuery。确保在使用类似于以下内容的 Prototype（您的其他框架）加载后包含 jQuery：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqueryui.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
  jQuery(document).ready(function($) 
    // here the $ function is jQuery's because it's an argument
    // to the ready handler
    $('#dateField').datepicker();
  );
  // here the $ function is Prototype's
</script>

【讨论】：

这仅适用于 Rails 3.0 之前的版本； jQuery 是新的默认设置。

【参考方案7】：

可能有点晚了，但我使用了一个简单的 gem：

宝石文件： gem 'jquery-ui-rails'

应用程序.js： //= require jquery-ui

应用程序.css *= require jquery-ui

然后： Bundle install

来源： https://github.com/joliss/jquery-ui-rails