Uncaught type error: $(…).datepicker() is not a function

问题

I am trying to use the jQuery datepicker function but I am receiving an error Uncaught type error: $(...).datepicker() is not a function. I have gone through my files and do not see a double reference to jQuery or incorrect file order in the application.js. Could someone help point out what might be the problem?

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

回答1:

Include gem 'jquery-ui-rails' into your gemfile.

To require all jQuery UI modules, add the following to your application.js:

//= require jquery-ui

Into your stylesheets:

/*
 *= require jquery-ui
 */

Gem docs

回答2:

Using https://github.com/TrevorS/bootstrap3-datetimepicker-rails

In Gemfile:

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

Run:

bundle

Bootstrap CSS options (choose one):

CDN in .erb as shown in question
Rails Asset Pipeline https://github.com/seyhunak/twitter-bootstrap-rails
Install into vendor/assets/ as described here: http://www.erikminkel.com/2013/09/01/twitter-bootstrap-3-in-a-rails-4-application

In application.css after bootstrap require:

*= require bootstrap-datetimepicker

In application.js:

//= 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();

来源：https://stackoverflow.com/questions/38177237/uncaught-type-error-datepicker-is-not-a-function

标签

ruby-on-rails

ruby