JQuery Datepickerを使用して日付フィールドをRuby on Rails form)に設定しようとしていますが、その方法を理解できません。誰かが私を正しい方向に向けることができますか?
ライアン・ベイツはこのすべてについて本当に素晴らしい説明をしています:
http://railscasts.com/episodes/213-calendars (無料で視聴できる古いバージョン) http://railscasts.com/episodes/213-calendars-revised =(視聴するにはサブスクリプションが必要な改訂版)
今のところ、jquery uiライブラリ全体ではなく日付ピッカーアセットのみを含めることができるという単純な理由から、jquery-ui-Rails gemを他の回答よりも上に置くことをお勧めします!
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 ...ハードコーディングするよりも私にとっては優れています)。
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", ->
少し遅いかもしれませんが、私は単純な宝石を使用しています:
Gemfile:gem 'jquery-ui-Rails'
Application.js://= require jquery-ui
Application.css *= require jquery-ui
その後: Bundle install
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>