如何设置bootstrap-datepicker-rails?

时间:2012-10-17 07:07:47

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

有谁知道如何设置gem bootstrap-datepicker-rails?我按照http://rubydoc.info/gems/bootstrap-datepicker-rails/0.6.21/frames中的步骤进行了操作,基本上是:

  1. 我设置了twitter-bootstrap-rails gem
  2. 我将此添加到gemfile gem 'bootstrap-datepicker-rails', '>= 0.6.21'
  3. 将此行添加到app / assets / stylesheets / application.css

    *= require bootstrap-datepicker
    
  4. 将此行添加到app / assets / javascripts / application.js

    //= require bootstrap-datepicker
    
  5. 将此行添加到app / assets / javascripts / controllername.js.coffee

    $('.datepicker').datepicker()
    
  6. 最后在视图中使用:)

    <input type="text" data-behaviour='datepicker' >
    
  7. 但它不起作用!!有人有它上班吗?它应该很好用,如下所示:
    http://jsfiddle.net/2Gg5k/43/

3 个答案:

答案 0 :(得分:6)

在javascript中查看步骤5和步骤6,您的选择类.datepicker,但不在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类型。 如果属性使用datetime类型

,则可以使用bootstrap-datetimepicker-rails gem

答案 1 :(得分:0)

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()

答案 2 :(得分:0)

我做了同样的事情,但我更改了代码:

  

$( 'datapicker')。datapicker()

通过此代码:

  

$( '[数据行为〜=日期选择器]')。日期选择器()

我尝试使用类'datapicker'但未找到。

这是我的例子,我用HAML和coffeescript

events.js.coffe

  

$ - &gt;

     

$( '[数据行为〜=日期选择器]')。日期选择器()

_form.haml

  

= simple_form_for @event,:html =&gt; {:class =&gt; “形式水平井”}做| f |

     

.field(就是这样)

= f.input :date, :input_html => { "data-behaviour" => "datepicker" }
     

.FORM-动作

= f.button :submit, 'Create Event' ,:class => 'btn btn-success btn-large'