如何将jQuery Datepicker连接到Ruby on Rails表单?

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表单中设置日期字段，但是我无法解决如何设置日期字段。有人能给我指出正确的方向吗?

7 个解决方案

#1

Ryan Bates has a really great explanation of all of this:

瑞恩·贝茨对此有一个很好的解释:

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/episode des/213 calendar(你可以免费观看旧版本)

#2

I've built a gem to handle this:

我做了一个宝石来处理这个:

https://github.com/albertopq/jquery_datepicker

Hope it helps somebody else.

希望它能帮助别人。

#3

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胜过其他答案，原因很简单，您可以只包含没有完整jquery ui库的datepicker资产!

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

#4

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的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只是我的表单助手，用来推进tab + 1…)对我来说比硬编码更好)。

#5

Update for Rails 5.x

更新Rails 5. x

Step 1. Install the jquery-ui-rails gem

步骤1。安装jquery-ui-rails宝石

# 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的资源，该资源的日期或datetime字段名为: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语法)。如果启用了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.

您针对的是窗体中的元素id。Rails通过组合模型名和字段名，自动向表单输入分配id。

Line3) You need to set the dateFormat because jQuery-UI and Rails use different default date formats.

您需要设置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", ->

#6

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 noConflict mode. 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>

#7

It may be a bit late but I use a simple gem :

可能有点晚了，但我用了一个简单的宝石:

Gemfile: gem 'jquery-ui-rails'

Gemfile:宝石“jquery-ui-rails”

Application.js: //= require jquery-ui

应用程序。js:/ / =需要jquery ui

Application.css *= require jquery-ui

应用程序。css * =需要jquery ui

And then: Bundle install

然后:包安装

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

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

#1