2016-07-04 14 views
3

jQueryのdatepicker関数を使用しようとしていますが、エラーUncaught type error: $(...).datepicker() is not a functionが表示されています。私は自分のファイルを調べて、application.jsのjQueryや不正なファイルの順序についての二重引用符は表示されません。誰かが問題であるかもしれないことを指摘することができますか?

application.html.erb

<!DOCTYPE html> 
<html> 
<head> 
<%= javascript_include_tag 'application' %> 
    <title>MyApp</title> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<!-- CSS/Bootstrap --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 


    <%= stylesheet_link_tag 'application' %> 
    <%= csrf_meta_tags %> 
    <!-- --> 
</head> 
<body> 

    <%= render partial: "shared/top_info" %> 

<%= yield %> 




<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"> 
</script> 
<!-- --> 
</body> 
</html> 

application.js

//= require jquery 
//= require jquery_ujs 
//= require ahoy 
//= require_tree . 

$('#customer_drop_off_date').datepicker(); 

html.erb

<% form_tag('/post') do %> 
    <%= text_field_tag(:customer_drop_off_date) %> 
<% end %> 

Gemfile

source 'https://rubygems.org' 

gem 'rails', '4.2.6' 
gem 'pg', '~> 0.15' 
gem 'uglifier', '>= 1.3.0' 
gem 'jquery-rails' 
gem 'jbuilder', '~> 2.0' 
gem 'sprockets' 
gem 'sdoc', '~> 0.4.0', group: :doc 
gem 'bcrypt', '~> 3.1.7' 
gem 'devise' 
gem 'figaro' 
gem 'paperclip', '~> 5.0.0.beta1' 
gem 'ahoy_matey' 
gem 'geocoder' 

group :development, :test do 
    gem "pry" 
    gem "pry-rails" 
    gem "pry-stack_explorer" 
    gem "pry-byebug" 
    gem 'byebug' 
end 

group :development do 
    gem 'web-console', '~> 2.0' 
    gem 'spring' 
end 
+0

どこに 'datepicker'プラグインが必要ですか? –

+1

すべてのスクリプトファイルを含む '/ require_tree .'が終わりました。しかし、javascriptsフォルダの中にjquery_ui jsがありますか?または使用している他の日付ピッカープラグインですか? – Kumar

+0

私はまだ、私はライアンベイツからのチュートリアルに従っています:http://railscasts.com/episodes/213-calendars?autoplay=true – rebbailey

答えて

3

はあなたgemfileにgem 'jquery-ui-rails'を含めます。あなたのスタイルシートの中へ

//= require jquery-ui

を::

/* 
*= require jquery-ui 
*/ 

Gem docs

1

enter image description here

、すべてのjQuery UIモジュールを必要とし、あなたのapplication.jsに次を追加するには

ウシGemfileでhttps://github.com/TrevorS/bootstrap3-datetimepicker-rails

ngを:

gem 'momentjs-rails', '>= 2.9.0' 
gem 'bootstrap3-datetimepicker-rails', '~> 4.17.37' 

ラン:

bundle 

ブートストラップCSSオプション(いずれかを選択):.erb

が必要です。application.jsで

*= require bootstrap-datetimepicker 

を:

//= require jquery 
//= require jquery_ujs 
//= require ahoy 
// 
// NEW (add these two lines) 
//= require moment 
//= require bootstrap-datetimepicker 
// 
//= require_tree . 

// OLD 
//$('#customer_drop_off_date').datepicker(); 

// NEW 
$('#customer_drop_off_date').datetimepicker(); 
関連する問題