Question

我使用以下方法在表单上设置了一个日期选择器：

<div class="input-group date" id="dp1">
      <%= f.text_field :birthdate, class: "form-control"%>
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>

我用

解雇js

$('#dp1').datepicker()

我的css和js包含如下：

CSS

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "bootstrap-datepicker";

JS

//= require jquery
//= require turbolinks
//= require moment
//= require bootstrap-sprockets
//= require get-shit-done
//= require bootstrap-datepicker

当我点击时，看不到任何内容，但如果我检查元素，我可以看到下拉列表存在，从display:none切换到display:block并处于正确的位置。

但是什么都没有，所以我认为下拉列表就在那里，但在其他所有内容之后，改变z-index并没有改变任何东西。

任何想法，为什么要这样做以及如何解决它？

感谢，

Answer 1

正如bootstrap-datepicker library docs所说：

$('.datepicker').datepicker({
    format: 'mm/dd/yyyy',
    startDate: '-3d'
})
大多数选项可以作为目标元素的数据属性提供：
<input class="datepicker" data-date-format="mm/dd/yyyy">

您必须选择输入并将datepicker()应用于它。

因此，<%= text_field_tag(:q) %>将呈现为<input id="q" name="q" type="text" />（查看rails guides on form helpers）

因此，这可能会对您有所帮助：

$('#dp1 #birthdate').datepicker()

Rails4 + Bootstrap，日期选择器没有显示

1 个答案: