32

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

4

7 回答 7

18

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

https://github.com/albertopq/jquery_datepicker

希望它可以帮助别人。

于 2011-10-16T19:40:18.993 回答
16

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

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

于 2010-07-26T00:54:33.483 回答
5

截至目前，我推荐 jquery-ui-rails gem 高于其他答案，原因很简单，您可以只包含 datepicker 资产而无需整个 jquery ui 库！

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

于 2012-11-09T06:36:51.123 回答
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 的表单助手......对我来说比硬编码更好）。

于 2011-11-06T21:48:19.560 回答
4

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（Turbolinks 通过使用 AJAX 加载链接来加快 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", ->
于 2017-04-08T02:45:48.577 回答
1

如果使用 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>
于 2010-07-25T14:17:25.893 回答
1

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

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

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

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

接着： Bundle install

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

于 2015-09-19T09:00:36.053 回答