如何设置 bootstrap-datepicker-rails？答案

【问题标题】：How to setup bootstrap-datepicker-rails?如何设置 bootstrap-datepicker-rails？
【发布时间】：2012-10-07 09:24:50
【问题描述】：

有人知道如何设置 gem bootstrap-datepicker-rails 吗？我按照http://rubydoc.info/gems/bootstrap-datepicker-rails/0.6.21/frames中的步骤，基本上：

我设置了twitter-bootstrap-rails gem
我将此添加到 gemfile gem 'bootstrap-datepicker-rails', '>= 0.6.21'
将此行添加到 app/assets/stylesheets/application.css
```
*= require bootstrap-datepicker
```
将此行添加到 app/assets/javascripts/application.js
```
//= require bootstrap-datepicker
```
将此行添加到 app/assets/javascripts/controllername.js.coffee
```
$('.datepicker').datepicker()
```

终于在视图中使用了:)

<input type="text" data-behaviour='datepicker' >

但它不起作用！有人让它工作吗？它应该可以正常工作，如下所示：
http://jsfiddle.net/2Gg5k/43/

【问题讨论】：

我也有同样的问题，你找到解决办法了吗？我不断收到未定义日期选择器的未捕获豁免。

标签： datepicker ruby-on-rails-3.2 jquery-ui-datepicker twitter-bootstrap-rails

【解决方案1】：

查看第 5 步和第 6 步，您的选择类 .datepicker 在 javascript 中，而不是在 input field 中

试试这个

关于视图（例如表单）

<%= f.text_field :mydate, 'data-behaviour' => 'datepicker' %>

<script type="text/javascript">
  $('[data-behaviour~=datepicker]').datepicker();
</script>

或作为组件：

<div class="input-append date datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
    <%= f.text_field :mydate, 'data-behaviour' => 'datepicker', :disabled => 'disable' %><span class="add-on"><i class="icon-th"></i></span>
</div>

<script type="text/javascript">
  $('.datepicker').datepicker();
</script>

如果属性使用date 类型，则首先举例。可以使用bootstrap-datetimepicker-railsgem，如果属性使用datetime类型

【讨论】：

如何使用 Rails 文本字段标签，例如 '3', data: { behavior: "datepicker" }, :value => Time.now.strftime("%Y-%m-%d"), :id => "datepicker" %>

【解决方案2】：

In the view, try this:
<div class="field">
  <%= f.label 'Trade Date: ' %>
  <%= f.text_field :trade_date, 'data-behaviour' => 'datepicker' %><br />
</div>  
In your application.js, use:
$(document).on("focus", "[data-behaviour~='datepicker']", function(e){
    $(this).datepicker({"format": "yyyy-mm-dd", "weekStart": 1, "autoclose": true})
});
instead of 
$('.datepicker').datepicker()

【讨论】：

【解决方案3】：

我也这样做了，但我更改了代码：

$('.datapicker').datapicker()

通过此代码：

$('[数据行为~=datepicker]').datepicker()

我尝试使用“datapicker”类但没有找到。

这是我的例子，我使用 HAML 和咖啡脚本

events.js.coffe

$->

$('[数据行为~=datepicker]').datepicker()

_form.haml

= simple_form_for @event, :html => {:class=> "form-horizontal well"} do |f|

.field（也就是这样）
= f.input :date, :input_html => { "data-behaviour" => "datepicker" }
.form-actions
= f.button :submit, 'Create Event' ,:class => 'btn btn-success btn-large'

【讨论】：