32

jQueryDatepickerを使用してRubyonRailsフォームに日付フィールドを設定しようとしていますが、その方法がわかりません。誰かが私を正しい方向に向けることができますか？

4

7 に答える 7

18

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

https://github.com/albertopq/jquery_datepicker

それが他の誰かに役立つことを願っています。

于 2011-10-16T19:40:18.993 に答える
16

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

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

于 2010-07-26T00:54:33.483 に答える
5

今のところ、jquery uiライブラリ全体なしでdatepickerアセットのみを含めることができるという単純な理由から、他の回答よりもjquery-ui-railsgemをお勧めします。

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

于 2012-11-09T06:36:51.123 に答える
4

私はalbertopqが言及しているalbertopqのjquery_datepickerを使用しました。これは通常のフォーム、ネストされた属性などで機能します。これにより、作業が非常に簡単になりました。jquery_datepickerは、datepickerの必要なjavascript呼び出しにオプションを正しく渡します。

これが私のネストされたフォームの1つの例です：

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

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

于 2011-11-06T21:48:19.560 に答える
4

Rails5.xのアップデート

手順1.jquery-ui-railsgemをインストールします

# 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という日付または日時フィールドを持つEventというリソースがあると仮定し、フォームで：startフィールドをテキストフィールドにします。

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

ステップ3.Javascriptを追加します（ここではCoffeeScript構文で）。Line1）Turbolinksを有効にしている場合（TurbolinksはAJAXでリンクをロードしてリンクをクリックすると、Railsページのロードを高速化します）、ラッパーを追加する必要があります。そうしないと、内部リンクからページに移動したときに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）ファイルの最初の行を除いてすべて同じです。Rails4でTurbolinksが有効になっているときにJavaScriptをロードするラッパーは次のとおりです。

$(document).on "page:change", ->
于 2017-04-08T02:45:48.577 に答える
1

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

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>
于 2010-07-25T14:17:25.893 に答える
1

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

Gemfile： gem 'jquery-ui-rails'

Application.js： //= require jquery-ui

Application.css *= require jquery-ui

その後： Bundle install

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

于 2015-09-19T09:00:36.053 に答える