未捕获的类型错误：$(...).datepicker() 不是函数答案

【问题标题】：Uncaught type error: $(...).datepicker() is not a function未捕获的类型错误：$(...).datepicker() 不是函数
【发布时间】：2016-07-04 05:01:09
【问题描述】：

我正在尝试使用 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 %>

宝石文件

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

【问题讨论】：

哪里需要datepicker插件？
我看到你已经完成了，//= require_tree . 这将包括所有脚本文件。但是你的 javascripts 文件夹中有 jquery_ui js 吗？或者您正在使用的任何其他日期选择器插件？
我还没有，我正在学习 Ryan Bates 的教程：railscasts.com/episodes/213-calendars?autoplay=true
@Kumar 是我错过了这颗宝石：github.com/joliss/jquery-ui-rails

标签： ruby-on-rails ruby

【解决方案1】：

将 gem 'jquery-ui-rails' 包含到您的 gemfile 中。

要要求所有 jQuery UI 模块，请将以下内容添加到您的 application.js：

//= require jquery-ui

进入你的样式表：

/*
 *= require jquery-ui
 */

Gem docs

【讨论】：

【解决方案2】：

使用https://github.com/TrevorS/bootstrap3-datetimepicker-rails

在 Gemfile 中：

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

运行：

bundle

引导 CSS 选项（选择一项）：

.erb 中的 CDN，如问题所示
Rails 资产管道https://github.com/seyhunak/twitter-bootstrap-rails
安装到vendor/assets/，如下所述：http://www.erikminkel.com/2013/09/01/twitter-bootstrap-3-in-a-rails-4-application

在引导后的 application.css 中需要：

*= require bootstrap-datetimepicker

在 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();

【讨论】：