【问题标题】:bootstrap-datepicker-rails not working via simple_form with bootstrap modalbootstrap-datepicker-rails 不能通过 simple_form 和 bootstrap 模式工作
【发布时间】:2013-12-09 06:25:36
【问题描述】:

我正在尝试让日期选择器(使用 bootstrap-datepicker-rails gem)通过 simple_formbootstrap modal 显示,但没有运气。

我读过很多东西,例如:

https://github.com/Nerian/bootstrap-datepicker-rails/issues/51 How to setup bootstrap-datepicker-rails? http://learningnewtricks.wordpress.com/2013/07/03/bootstrap-date-picker-on-rails-so-simple/ http://www.chadcf.com/blog/jqueryui-datepicker-rails-and-simpleform-easy-way

我得到的只是一个文本字段,但是当我点击它时没有日期选择器。会不会是日期选择器在模态后面,如果是,如何解决?

我的设置如下:

fyousuf$ rails -v
Rails 3.2.12

fyousuf$ ruby -v
ruby 2.0.0p247 (2013-06-27 revision 41674) [x86_64-darwin12.3.0]

app/assets/stylesheets/application.css

    *= require_self
    *= require fullcalendar
    *= require bootstrap-datepicker
    *= require_tree .

app/assets/javascripts/application.js

    //= require jquery
    //= require jquery_ujs
    //= require twitter/bootstrap
    //= require bootstrap
    //= require fullcalendar
    //= require bootstrap-datepicker
    //= require_tree .

app/assets/javascript/s/events.js

    # Place all the behaviors and hooks related to the matching controller here.
    # All this logic will automatically be available in application.js.
    # You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/

    $('[data-behaviour~=datepicker]').datepicker({"format": "yyyy-mm-dd", "weekStart": 1,      "autoclose": true});

app/views/events/_form.html.erb

    <%= simple_form_for(@event) do |f| %>
        ...
        <%= f.input :starts_at, :as => :string, :input_html => { data: {behaviour: "datepicker"}} %>
        ...
    <% end %>

【问题讨论】:

  • datepicker初始化代码包装在jquery文档中的events.js中,即$(document).ready(function(){/* Your datepicker initialization code here */});
  • 更改为这个但仍然是相同的行为: $(document).ready(function() { $('[data-behaviour~=datepicker]').datepicker({"format": "yyyy -mm-dd", "weekStart": 1, "autoclose": true}); });

标签: javascript jquery ruby-on-rails twitter-bootstrap bootstrap-datepicker


【解决方案1】:

在我看来

= f.input :first_name
= f.input :last_name
= f.input :date_of_birth, as: :string, input_html: { class: "datepicker" }

在我的 application.js 上

$(function() {
    $('input.datepicker').data({behaviour: "datepicker"}).datepicker();
});

我正在使用的版本

> bundle | grep bootstrap

Using bootstrap-datepicker-rails 1.3.0.2
Using twitter-bootstrap-rails 2.2.8

它非常适合我。如果我单击输入“date_of_birth”,则会在加载表单后立即出现日期选择器。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-10-16
    • 1970-01-01
    • 2014-08-27
    • 1970-01-01
    • 2015-01-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多