Question

这些是我的javascript和css

我正在尝试使用bootstrap-datepicker-rails，但它在控制台上给我错误，并且它没有正确显示在屏幕上。我甚至尝试过这种宝石的替代品，但这些都不适合我。

我在控制台上收到的错误

bootstrap-datepicker.sw.self-d38809b….js?bo…:8 Uncaught TypeError: Cannot read property 'dates' of undefined
    at bootstrap-datepicker.sw.self-d38809b….js?bo…:8
    at bootstrap-datepicker.sw.self-d38809b….js?bo…:16
(anonymous) @ bootstrap-datepicker.sw.self-d38809b….js?bo…:8
(anonymous) @ bootstrap-datepicker.sw.self-d38809b….js?bo…:16
app.min.self-1bbba6e….js?body=1:14 Uncaught TypeError: Cannot read property 'options' of undefined
    at HTMLDocument.<anonymous> (app.min.self-1bbba6e….js?body=1:14)
    at i (jquery-2.2.3.min.self-0c1f22f….js?body=1:3)
    at Object.fireWith [as resolveWith] (jquery-2.2.3.min.self-0c1f22f….js?body=1:3)
    at Function.ready (jquery-2.2.3.min.self-0c1f22f….js?body=1:3)
    at HTMLDocument.J (jquery-2.2.3.min.self-0c1f22f….js?body=1:3)
(anonymous) @ app.min.self-1bbba6e….js?body=1:14
i @ jquery-2.2.3.min.self-0c1f22f….js?body=1:3
fireWith @ jquery-2.2.3.min.self-0c1f22f….js?body=1:3
ready @ jquery-2.2.3.min.self-0c1f22f….js?body=1:3
J @ jquery-2.2.3.min.self-0c1f22f….js?body=1:3

的Gemfile

source 'http://rubygems.org'

ruby '2.3.0'

git_source(:github) do |repo_name|
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
  "https://github.com/#{repo_name}.git"
end

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.0.1'
# Use sqlite3 as the database for Active Record
# Use Puma as the app server
gem 'puma', '~> 3.0'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'

gem 'mongoid', git: 'https://github.com/mongodb/mongoid.git'
gem 'bson_ext'
# Use Uglifier as compressor for JavaScript assets
gem 'nodejs-rails', '~> 0.0.1'
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# See https://github.com/rails/execjs#readme for more supported runtimes
gem 'therubyracer', platforms: :ruby
gem 'devise'
#gem 'carrierwave', github: 'carrierwaveuploader/carrierwave'
gem 'carrierwave-mongoid', :require => 'carrierwave/mongoid'
gem "mini_magick"
gem 'omniauth'
gem 'omniauth-facebook', '1.4.0'
gem 'twilio-ruby', '~> 4.1.0'
gem 'city-state'
gem 'haversine', '~> 0.3.0'
gem 'geocoder', '~> 1.3', '>= 1.3.1'
gem 'table_print', '~> 1.5', '>= 1.5.6'
gem 'rufus-scheduler', '~> 3.2'
gem 'multi_json', '~> 1.11', '>= 1.11.2'
gem 'httparty', '~> 0.13.7'
gem 'will_paginate', '~> 3.1', '>= 3.1.5'
gem 'houston', '~> 2.2', '>= 2.2.3'
gem 'select2-rails', '~> 4.0', '>= 4.0.3'
gem 'bootstrap-datepicker-rails'




# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'

# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platform: :mri
  gem 'letter_opener'
  gem 'pry'
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '~> 3.0.5'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end



# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
#gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

application.jss

   // This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap.min.js
//= require bootstrap-datepicker
//= require turbolinks
//= require select2
//= require icheck.min.js
//= require_tree .


$.widget.bridge('uibutton', $.ui.button);


 //do something



setTimeout(function() {
    $('.alert-error').fadeOut('fast');
}, 1000);


setTimeout(function() {
    $('.alert-alert').fadeOut('fast');
}, 1000);

setTimeout(function() {
    $('.alert-notice').fadeOut('slow');
}, 1000);

setTimeout(function() {
    $('#error_explanation').fadeOut('slow');
}, 2000);

application.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require select2
 *= require bootstrap-datepicker
 *= require_tree .
 *= require_self
 */

用户/ edit.html.erb

 <section class="content">
      <div class="row">
         <div class="col-md-3">
         </div>
        <div class="col-md-6">

          <div class="box box-warning">
            <div class="box-header with-border">
              <h3 class="box-title">Update User</h3>
            </div>

            <div class="box-body">
             <%= form_for @user do |f| %>





                 <div class="form-group">
                  <label>Age</label>

                 <%= f.text_field :age, :class => 'datepicker'  %>
                </div> 




                <div>
                  <label>Images</label>
                  <div class="post">

                  <div class="row margin-bottom">

                    <div class="col-sm-12">
                      <div class="row">
                         <% @user.images.each do |image| %>
                        <div class="col-sm-3">
                           <a href="#" onclick='user_delete_image("<%=image.id%>");'<i class="fa fa-times" aria-hidden="true"></i> </a>
                          <img class="img-responsive" src="<%= image.name_url %>" alt="Photo">
                          <br/>

                        </div>
                           <% end %>
                      </div>
                    </div>
                  </div>
                </div>

                </div>


                <div class="box-footer">
                   <%= f.submit 'Submit',class: 'btn btn-primary' %>    
                   <%= link_to "Cancel",edit_user_path(@user),:class => "btn btn-danger",:id => "cancel",data: { confirm: 'Are you sure?'} %>
              </div>

              <div class="box-footer">

              </div>


             <%end %>
            </div>

          </div>

        </div>

      </div>

    </section>





<script>




var $j = jQuery.noConflict();
$j(".datepicker").datepicker({dateFormat: 'yy-mm-dd'});


</script>

User.rb

class User
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable and :omniauthable
  include Mongoid::Document
  include Mongoid::Timestamps

  devise :database_authenticatable, :registerable,
        :recoverable, :rememberable, :trackable, :validatable, :confirmable#, :omniauthable, :omniauth_providers => [:facebook]


  before_save :ensure_authentication_token 

  has_many :images, dependent: :destroy
  accepts_nested_attributes_for :images, allow_destroy: true




  field :email, :type => String
  field :encrypted_password, :type => String
  field :reset_password_token, :type => String
  field :reset_password_sent_at, :type => DateTime
  field :remember_created_at, :type => DateTime
  field :sign_in_count, :type => Integer
  field :current_sign_in_at, :type => DateTime
  field :last_sign_in_at, :type => DateTime
  field :current_sign_in_ip, :type => String
  field :last_sign_in_ip, :type => String

  field :phone_number, :type => String

  field :first_name, :type => String
  field :last_name, :type => String
  field :age, type: Date   




end

Rails bootstrap datepicker rails无法正常工作

0 个答案: