Datepicker不显示日历

Mah*_*hdi 9 ruby-on-rails datepicker turbolinks

我在我的应用程序中有一个表单,我可以从日期选择器日历中选择一个日期.刷新页面时,单击表单时会出现日期选择器日历.这是正确的行为.

但是,当我使用链接从其他页面到达同一页面时,单击表单后不会显示日历.我必须刷新页面才能使日历可见.

这是我的表单页面:

# app/views/reservations/_form.html.erb
...

      <div class="row reservations">
        <div class="span2 field">
          <%= f.label :mydate %><br />
          <%= f.text_field :mydate, class: "input-append date datepicker", value: Date.today.strftime('%d-%m-%Y') %>
        </div>
...
Run Code Online (Sandbox Code Playgroud)

我的javascript代码:

# app/assets/javascripts/reservations.js.coffee
$ -> $('.date').datepicker({
    format: 'dd-mm-yyyy'
    autoclose: true
    todayHighlight: true
    language: 'fr'
});
Run Code Online (Sandbox Code Playgroud)

和Gemfile:

source 'https://rubygems.org'

ruby "2.0.0"

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.0.0.beta1'
gem 'bootstrap-sass', '2.3.1.0'
gem 'bcrypt-ruby', '3.0.1'
gem 'protected_attributes'
gem 'will_paginate'
gem 'bootstrap-will_paginate'
gem 'bootstrap-datepicker-rails'
gem 'rails-i18n'

gem 'pg'

# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '~> 4.0.0.beta1'
  gem 'coffee-rails', '~> 4.0.0.beta1'

  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
  # gem 'therubyracer', platforms: :ruby

  gem 'uglifier', '>= 1.0.3'
end

gem 'jquery-rails'

# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'

# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 1.0.1'
Run Code Online (Sandbox Code Playgroud)

sta*_*xim 12

我遇到了同样的问题.这是一个涡轮问题.

您可以通过向href或div添加data-no-turbolink来禁用您来自的源页面上的turbolink,这样就可以使它工作.即

<%= link_to "Create New Form", sampleform_path, 'data-no-turbolink' => true %> 
Run Code Online (Sandbox Code Playgroud)

查看更多细节在这里,在"选择退出Turbolinks的"部分.

[编辑]我认为更好的解决方案是在页面中调用document.ready代码:也可以在coffeescript中更改事件.这是您可以使用的代码:

$(document).on 'ready page:load', -> $('.date').datepicker({
    format: 'dd-mm-yyyy'
    autoclose: true
    todayHighlight: true
    language: 'fr'
});
Run Code Online (Sandbox Code Playgroud)