How to setup bootstrap-datepicker-rails?

倖福魔咒の 提交于 2019-11-30 02:00:01

问题


Anybody knows how to setup the gem bootstrap-datepicker-rails? I followed the steps in http://rubydoc.info/gems/bootstrap-datepicker-rails/0.6.21/frames, basically:

  1. I setup twitter-bootstrap-rails gem
  2. I add this to gemfile gem 'bootstrap-datepicker-rails', '>= 0.6.21'
  3. Add this line to app/assets/stylesheets/application.css

    *= require bootstrap-datepicker
    
  4. Add this line to app/assets/javascripts/application.js

    //= require bootstrap-datepicker
    
  5. Add this line to app/assets/javascripts/controllername.js.coffee

    $('.datepicker').datepicker()
    
  6. Finally use in view :)

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

But it doesn't work!! Anybody has got it to work? It should work nice as shown here:
http://jsfiddle.net/2Gg5k/43/


回答1:


Look at step 5 and step 6, your selection class .datepicker in javascript but not in input field

Try this

on views (e.g form)

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

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

Or As component :

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

Example above all if the attribute using date type. You can use bootstrap-datetimepicker-rails gem, if the attribute using datetime type




回答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:


I did the same, but I change the code:

$('.datapicker').datapicker()

By this code:

$('[data-behaviour~=datepicker]').datepicker()

I try using a class 'datapicker' but not found.

This is my example, I use to HAML and coffeescript

events.js.coffe

$ ->

$('[data-behaviour~=datepicker]').datepicker()

_form.haml

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

.field (That is the same )

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

.form-actions

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


来源:https://stackoverflow.com/questions/12928918/how-to-setup-bootstrap-datepicker-rails

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!