日期标记不显示日历 [英] Datepicker does not display the calendar

问题描述

我在申请表中有一个表单，我可以从日期戳日历中选择一个日期。刷新页面时，单击表单时会显示datepicker日历。这是正确的行为。

但是，当我使用链接从另一个页面到达同一页面时，单击表单后，日历不会显示。我必须刷新页面才能使日历显示。

这是我的表单页面：

 ＃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> 
 ... 
  

我的JavaScript代码：

 ＃app / assets / javascripts / reservations.js.coffee 
 $  - > $（'。date'）。datepicker（{
格式：'dd-mm-yyyy'
 autoclose：true 
 todayHighlight：true 
语言：'fr'
}）; 
  

宝石文件：

 源'https://rubygems.org'
 
 ruby​​2.0.0
 
＃捆绑边Rails代替：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'
 
＃默认情况下，生产环境中仅使用资产而不需要
＃的宝石。 
 group：assets do 
 gem'sass-rails'，'〜> 4.0.0.beta1'
 gem'coffee-rails'，'〜> 4.0.0.beta1'
 
＃请参阅https://github.com/sstephenson/execjs#readme获取更多支持的运行时
＃gem'therubyracer'，平台：：ruby 
 
 gem'uglifier'，'> = 1.0.3'
 end 
 
 gem'jquery-rails'
 
＃Turbolinks制作以下链接在您的Web应用程序中更快。阅读更多：https：//github.com/rails/turbolinks 
 gem'turbolinks'
 
＃轻松构建JSON API。阅读更多：https：//github.com/rails/jbuilder 
 gem'jbuilder'，'〜> 1.0.1'
  

解决方案

我遇到同样的问题。这是一个涡流问题。

您可以通过向href或div添加data-no-turbolink来禁用来自您的源页面的turbolinks，会让它工作。即

 <％= link_to创建新表单，sampleform_path，'data-no-turbolink'=>真实％> 
  

查看更多详情 / etc / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /您的文档在页面中的代码：更改事件也在coffeescript。以下是您可以使用的代码：

  $（document）.on'ready page：load'， - > $（'。date'）。datepicker（{
格式：'dd-mm-yyyy'
 autoclose：true 
 todayHighlight：true 
语言：'fr'
}）; 
  

I have in my application a form where I can chose a date from a datepicker calendar. When I refresh my page, the datepicker calendar appears when clicking the form. This is the correct behaviour.

However when I reach the same page from another page using a link, the calendar does not appear after clicking the form. I have to refresh the page in order to make the calendar visible.

Here is my form page:

# 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>
...

My javascript code:

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

And the 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'

解决方案

I was experiencing the same issue. This is a turbolinks problem.

You can disable turbolinks at the source page that you're coming from by adding data-no-turbolink to the href or div, and this will get it working. i.e.

<%= link_to "Create New Form", sampleform_path, 'data-no-turbolink' => true %> 

See more details here, under the "Opting out of Turbolinks" section.

[EDIT] I think the better solution is to call your document.ready code during the page:change event also in coffeescript. Here is the code you can use:

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

这篇关于日期标记不显示日历的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！