如何将 jQuery Datepicker 连接到我的 Ruby on Rails 表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3329381/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I connect jQuery Datepicker to my Ruby on Rails form?
提问by ben
I'm trying to use the jQuery Datepicker to set a date field in my Ruby on Rails form, but I can't work out how to do it. Can someone point me in the right direction?
我正在尝试使用 jQuery Datepicker 在我的 Ruby on Rails 表单中设置日期字段，但我不知道如何去做。有人可以指出我正确的方向吗？
采纳答案by Christian Bankester
Ryan Bates has a really great explanation of all of this:
瑞安·贝茨 (Ryan Bates) 对所有这些都有很好的解释：
http://railscasts.com/episodes/213-calendars(older version you can watch for free) http://railscasts.com/episodes/213-calendars-revised(revised version you need a subscription to watch)
http://railscasts.com/episodes/213-calendars（旧版可以免费观看） http://railscasts.com/episodes/213-calendars-revised（修订版需要订阅才能观看）
回答by albertopq
I've built a gem to handle this:
我已经构建了一个 gem 来处理这个问题：
https://github.com/albertopq/jquery_datepicker
https://github.com/albertopq/jquery_datepicker
Hope it helps somebody else.
希望它可以帮助别人。
回答by Damien Roche
As of now, I'd recommend jquery-ui-rails gem above the other answers for the simple reason you can include only the datepicker assets without the entire jquery ui library!
到目前为止，我建议将 jquery-ui-rails gem 放在其他答案之上，原因很简单，您可以只包含 datepicker 资产而不包含整个 jquery ui 库！
回答by Kevin from MBioEX
I used albertopq's jquery_datepicker that albertopq mentions and it works with regular forms, nested attributes, etc. It made things very easy for me. jquery_datepicker also correctly passes options to datepicker's necessary javascript calls.
我使用了 albertopq 提到的 albertopq 的 jquery_datepicker，它适用于常规表单、嵌套属性等。它使我的工作变得非常容易。jquery_datepicker 还正确地将选项传递给 datepicker 的必要 javascript 调用。
Here's an example from one of my nested forms:
这是我的嵌套表单之一的示例：
<%= f.datepicker 'availability', :minDate => 0, :maxDate => "+8Y", :tab_index => autotab %>
minDate and maxDate are passed to datepicker and tab_index is put into the text field html. (autotab is just my form helper to advance the tab + 1...better for me than hardcoding it).
minDate 和 maxDate 传递给 datepicker，tab_index 放入文本字段 html。（autotab 只是我的表单助手来推进选项卡 + 1 ...对我来说比硬编码更好）。
回答by Steve Carey
Update for Rails 5.x
Rails 5.x 的更新
Step 1. Install the jquery-ui-rails gem
步骤 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
Step 2. Assuming you have a resource called Event with a date or datetime field called :start, then in the form make the :start field a text field.
第 2 步。假设您有一个名为 Event 的资源，其中包含一个名为 :start 的日期或日期时间字段，然后在表单中将 :start 字段设为文本字段。
# app/views/events/_form.html.erb
<%= f.label :start, 'Start Date' %>
<%= f.text_field :start %>
Step 3. Add Javascript (in CoffeeScript syntax here). Line1) If you have Turbolinks enabled (Turbolinks speeds up Rails page loads when you click on a link by loading it with AJAX) you need to add a wrapper or the JavaScript function won't load when you navigate to the page from an internal link.
步骤 3. 添加 Javascript（此处使用 CoffeeScript 语法）。Line1) 如果您启用了 Turbolinks（Turbolinks 在您单击链接时通过 AJAX 加载它来加速 Rails 页面加载），您需要添加一个包装器，否则当您从内部链接导航到该页面时，JavaScript 函数将不会加载.
Line2) You are targeting the element id in your form. Rails automatically assigns an id to the form input by combining the Model name and field name.
Line2) 您的目标是表单中的元素 id。Rails 通过组合模型名称和字段名称自动为表单输入分配一个 id。
Line3) You need to set the dateFormat because jQuery-UI and Rails use different default date formats.
Line3) 您需要设置 dateFormat 因为 jQuery-UI 和 Rails 使用不同的默认日期格式。
# app/assets/javascripts/event.coffee
$(document).on 'turbolinks:load', ->
$('#event_start').datepicker
dateFormat: 'yy-mm-dd'
For Rails 4 everything is the same except the first line in the JavaScript (or CoffeeScript) file. The wrapper to load the JavaScript when Turbolinks is enabled in Rails 4 is:
对于 Rails 4，除了 JavaScript（或 CoffeeScript）文件中的第一行之外，一切都相同。在 Rails 4 中启用 Turbolinks 时加载 JavaScript 的包装器是：
$(document).on "page:change", ->
回答by Francois
It may be a bit late but I use a simple gem :
可能有点晚了，但我使用了一个简单的 gem：
Gemfile:
gem 'jquery-ui-rails'
宝石档案：
gem 'jquery-ui-rails'
Application.js:
//= require jquery-ui
应用程序.js：
//= require jquery-ui
Application.css
*= require jquery-ui
应用程序.css
*= require jquery-ui
And then:
Bundle install
进而：
Bundle install
回答by tvanfosson
If using Rails 3.0+, you shouldn't need to do anything other than include jQuery and jQuery UI because jQuery is the default JavaScript framework.
如果使用 Rails 3.0+，除了包含 jQuery 和 jQuery UI 之外，您不需要做任何事情，因为 jQuery 是默认的 JavaScript 框架。
If using Rails earlier than 3.0 or using Prototype (or something else), you'll need to use jQuery in noConflictmode. Make sure you include jQuery after Prototype (your other framework) has been loaded using something similar to:
如果使用 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>
