如何设置 bootstrap-datepicker-rails?
Posted
技术标签:
【中文标题】如何设置 bootstrap-datepicker-rails?【英文标题】:How to setup 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/
【问题讨论】:
我也有同样的问题,你找到解决办法了吗?我不断收到未定义日期选择器的未捕获豁免。 【参考方案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'
【讨论】:
以上是关于如何设置 bootstrap-datepicker-rails?的主要内容,如果未能解决你的问题,请参考以下文章
在 bootstrap-datepicker 中将日期设置为最初为空
如何在 Django 应用程序中使用 bootstrap-datepicker?
如何使用 bootstrap-datepicker 更新多个输入
如何实现和使用 eyecon 的 bootstrap-datepicker?