web-dev-qa-db-ja.com

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

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

32
ben

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

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

16

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

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

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