web-dev-qa-db-ja.com

jQuery DatepickerをRuby on Rails formに接続するにはどうすればよいですか？

JQuery Datepickerを使用して日付フィールドをRuby on Rails form）に設定しようとしていますが、その方法を理解できません。誰かが私を正しい方向に向けることができますか？

jqueryruby-on-railsjquery-uijquery-ui-datepicker
32
ben

ライアン・ベイツはこのすべてについて本当に素晴らしい説明をしています：

http://railscasts.com/episodes/213-calendars （無料で視聴できる古いバージョン） http://railscasts.com/episodes/213-calendars-revised =（視聴するにはサブスクリプションが必要な改訂版）

16
Christian Bankester

これを処理するための宝石を作りました：

https://github.com/albertopq/jquery_datepicker

それが他の誰かを助けることを願っています。

17
albertopq

今のところ、jquery uiライブラリ全体ではなく日付ピッカーアセットのみを含めることができるという単純な理由から、jquery-ui-Rails gemを他の回答よりも上に置くことをお勧めします！

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

5
Damien Roche

Albertopqが言及しているalbertopqのjquery_datepickerを使用しました。これは、通常のフォームやネストされた属性などで動作します。 jquery_datepickerは、オプションを日付ピッカーの必要なJavaScript呼び出しに正しく渡します。

これが、ネストされたフォームの1つからの例です。

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

minDateとmaxDateがdatepickerに渡され、tab_indexがテキストフィールドhtmlに入力されます。 （autotabは、タブを進めるためのフォームヘルパーです+ 1 ...ハードコーディングするよりも私にとっては優れています）。

4
Kevin from MBioEX

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.：startと呼ばれる日付または日時フィールドを持つイベントと呼ばれるリソースがあると想定し、フォームで：startフィールドをテキストフィールドにします。

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

ステップ3. Javascriptを追加します（CoffeeScript構文で）。 Line1）Turbolinksを有効にしている場合（TurbolinksはスピードアップしますRails AJAXでロードしてリンクをクリックするとページがロードされます）ラッパーを追加する必要があります。そうしないとJavaScript関数がロードされません。内部リンクからページに移動します。

Line2）フォームの要素IDをターゲットにしています。 Railsは、モデル名とフィールド名を組み合わせることにより、フォーム入力に自動的にIDを割り当てます。

Line3）jQuery-UIとRailsは異なるデフォルトの日付形式を使用するため、dateFormatを設定する必要があります。

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

Rails 4の場合、JavaScript（またはCoffeeScript）ファイルの最初の行を除いてすべて同じです。ターボリンクが有効になっているときにJavaScriptをロードするラッパーは、Rails 4は：

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

少し遅いかもしれませんが、私は単純な宝石を使用しています：

Gemfile：gem 'jquery-ui-Rails'

Application.js：//= require jquery-ui

Application.css *= require jquery-ui

その後： Bundle install

ソース： https://github.com/joliss/jquery-ui-Rails

1
Francois

Rails 3.0+を使用している場合、jQueryがデフォルトのJavaScriptフレームワークであるため、jQueryとjQuery UIを含める以外に何もする必要はありません。

Rails 3.0より前またはPrototype（またはその他）を使用している場合は、jQueryを noConflict モードで使用する必要があります。Prototype（あなたの他のフレームワーク）は、次のようなものを使用してロードされています：

<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>
1
tvanfosson