Question

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

Answer 1

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

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

//= require jquery-ui

进入样式表：

/*
 *= require jquery-ui
 */

Gem docs

Answer 2

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

在Gemfile中：

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

执行命令

bundle

Bootstrap CSS选项（选择一个）：

.erb中的CDN，如问题所示
Rails Asset Pipeline https://github.com/seyhunak/twitter-bootstrap-rails
按照此处所述安装到vendor/assets/：http://www.erikminkel.com/2013/09/01/twitter-bootstrap-3-in-a-rails-4-application

在bootstrap之后的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();

未捕获类型错误：$（...）。datepicker（）不是函数

2 个答案: