質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.49%

Rails5.1.3、turbolinks5,でjqueryのdatepickerを使う方法教えてください。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,089

score 162

Webアプリを学習しながら制作していますが、参考書のバージョンより新しいバージョンをいろいろインストールしてしまい、望んだ
通りに動いてくれなくて困っております。(都度、皆様に助けてもらっております。)
今、日付入力欄にdatepickerで日付選択ができるようにしたいのですが、たぶんturbolinksのバージョンの違いで発火してくれて
いないようです。
「変更する」、「変更しない」の切り替えは ***.js.coffeeのファイルを以下のようにしたら動いてくれました。

$(document).on 'turbolinks:load', ->
  $('form.edit_staff_member').on 'click', '#enable-password-field', ->
    $('#enable-password-field').hide()
    $('#disable-password-field').show()
    $('#staff_member_password').removeAttr('disabled')
    $('label[for=staff_member_password]').addClass('required')
  $('form.edit_staff_member').on 'click', '#disable-password-field', ->
    $('#disable-password-field').hide()
    $('#enable-password-field').show()
    $('#staff_member_password').attr('disabled', 'disabled')
    $('label[for=staff_member_password]').removeClass('required')


のように1行目を $(document).on 'page:change', ->から変更し記述ました。
原因はturbulinnks5からはこのように指定しなければならないとのことでした.

そこで、datepickerも同じ記述をしてやりましたがこちらは動きませんでした。(2カ所のコードを記述します)

$(document).on 'page:change', ->
  $('.birthday-picker').datepicker({
    minDate: new Date(1900, 1, 1),
    maxDate: new Date(),
    changeMonth: true,
    changeYear: true,
    yearRange: '1900:+00',
    defaultDate: '1970-01-01'
  })
$(document).on 'page:change', ->
  d = new Date()
  $.datepicker.setDefaults({
    dateFormat: "yy-mm-dd",
    minDate: new Date(2000, 1, 1),
    maxDate: new Date(d.getFullYear() + 1, d.getMonth(), d.getDate() - 1)
  })
  $('.datepicker').datepicker()


上の2つを以下でためしてみましたが同じでした。

 ページ切り替え時(初回ページも対象)

$(document).on 'turbolinks:load', -> console.log 'turbolinks:load'

 ページ切り替え時(初回ページは対象外)

$(document).on 'turbolinks:render', -> console.log 'turbolinks:render'

 ページ遷移前

$(document).on 'turbolinks:request-start', -> console.log 'turbolinks:request-start'

Gemfileは以下でbundle updateしています。
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'jquery-turbolinks'

app/assets/stylesheets/staff.cssの内容は以下です。
/*
*= jquery.ui.datepicker  #requireを削除するようにエラーが出たので削除しました。
*= require_tree ./shared
*= require_tree ./staff
*/
datepickerを使用するにはどうしたらいいのでしょうか?どなたか教えていただけないでしょうか?
宜しくお願いします。

追記させていただきます。動作確認をしたところ、「変更する」、「変更しない」も発火しなくなってしまいました。
少し前まで動いてくれていたのですが、エラーもでていないので原因がわからず困っております。
「変更する」、「変更しない」の部分のコードは何もいじっていないのに動かなくなる原因はどこに原因があるのでしょうか?

エラー内容追記

Sprockets::FileNotFound in Staff::Sessions#new
Showing /home/vagrant/chibi/chibi/app/views/layouts/staff.html.erb where line #6 raised:

couldn't find file 'jquely-ui/i18n/datepicker-ja' with type 'application/javascript'
Checked in these paths: 
  /home/vagrant/chibi/chibi/app/assets/config
  /home/vagrant/chibi/chibi/app/assets/images
  /home/vagrant/chibi/chibi/app/assets/javascripts
  /home/vagrant/chibi/chibi/app/assets/stylesheets
  /home/vagrant/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/jquery-turbolinks-2.1.0/vendor/assets/javascripts
  /home/vagrant/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/jquery-ui-rails-6.0.1/app/assets/images
  /home/vagrant/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/jquery-ui-rails-6.0.1/app/assets/javascripts
  /home/vagrant/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/jquery-ui-rails-6.0.1/app/assets/stylesheets
  /home/vagrant/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/jquery-rails-4.3.1/vendor/assets/javascripts
  /home/vagrant/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/coffee-rails-4.2.2/lib/assets/javascripts
  /home/vagrant/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actioncable-5.1.3/lib/assets/compiled
  /home/vagrant/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionview-5.1.3/lib/assets/compiled
  /home/vagrant/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/turbolinks-source-5.0.3/lib/assets/javascripts
Extracted source (around line #7):

5 //= require turbolinks
6 //= require jquery-ui/widgets/datepicker
7 //= require jquely-ui/i18n/datepicker-ja
8 //= require_tree ./shared
9 //= require_tree ./staff

Rails.root: /home/vagrant/chibi/chibi

Application Trace | Framework Trace | Full Trace
app/assets/javascripts/staff.js:7
app/views/layouts/staff.html.erb:6:in `_app_views_layouts_staff_html_erb___4578289695913132902_69866452249820'
app/controllers/staff/sessions_controller.rb:9:in `new'
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kjml

    2017/08/19 00:01

    前回の質問(の追記)にあったエラーの解消はされましたか? couldn't find file 'jquery.ui.datepicker' with type 'application/javascript' というエラーでしたのでそのままでしたらdatepickerが動かない可能性が高いと思われます。いまだにどこで「requireを削除するように」指示があったのかわからないままですが・・・

    キャンセル

  • koume

    2017/08/19 08:48

    回答ありがとうございます。requireを記述したままでブラウザで画面を開こうとするとエラーが出てしまい、削除するとページを開くことができました。

    キャンセル

回答 1

checkベストアンサー

+1

前回のエラーログあたりから、jquery-ui-rails-6.0.1 を使用、という事は、バージョンは6なので
application.js の記述は(訂正:ここはadmin.jsで書いているんでしたね)

//= require jquery-ui/widgets/datepicker
//= require jquery-ui/i18n/datepicker-ja

とすべきではないでしょうか。(-ハイフンと/スラッシュに注意)
参考:RailsでjQuery-uiのDatePickerを日本語表示する-jquery-ui-rails(6..)

追記:
あと、application.css はどうなのでしょう?
 *= require jquery-ui/datepicker  と記述するようにとリンク先でも書いてありましたが・・・
(ここでも-ハイフンと/スラッシュに注意)

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/19 17:44

    なんかエラーメッセージを勘違いされているような気がしてしょうがないのですが、
    エラーメッセージ内にある行番号付きの
    5 //= require turbolinks
    6 //= require jquery-ui/widgets/datepicker
    は、原因となっている箇所(ファイル)の中身を表示して「こう書いてあるけど…」と示しているだけですので、 turbolinksを「使います(=require)」、jquery-ui/widgets/datepicker を「使います」、という宣言しているというか設定です。
    「require」 は「必要です(がそれが無くてエラーになっています)」という意味のエラーメッセージではありません。実際そのファイルを開いて見ればわかると思いますが、そのままrequireが書いてあるはずです。
    エラーの内容は、 「jquely-ui/i18n/datepicker-ja を使用します」という設定に対し、
    その datepicker-ja を探しに行くとありませんでした、というエラーメッセージです。
    (このときの「使用します」というのが requireです)

    キャンセル

  • 2017/08/20 10:22

    回答ありがとうございます。ご指摘の通りスペルミスが原因でした。
    お騒がせいたしました。今度とも宜しく願いします。

    キャンセル

  • 2017/08/28 19:16

    以前はお世話になりました。また、jqueryに関して疑問点がありましたので
    新たに質問させていただいております。もし、回答していただけるようでしたらお願いできますでしょうか?なかなか回答が得られないので困っております。宜しくお願いします。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る