Rails 4 x Bootstrap 3 Datetimepicker：设计不好

问题描述

我想在我的Rails4应用程序中应用Bootstrap3 Datetimepicker 。

但是布局不是好像这个页面（在中间的问题图像）。

如果您能给我任何建议，我们将不胜感激。

_xxx_form.html.erb

 <％= simple_nested_form_for（@schedule）do | f | ％> 
< div class =input-group dateid =datetimepicker> 
<％= f.label：departure_date％> 
<％= f.text_field：departure_date，class：'form-control'％> 
< span class =input-group-addon> 
< span class =glyphicon-calendar glyphicon>< / span> 
< / span> 
< / div> 
< script type =text / javascript> 
 $（function（）{
 $（'＃datetimepicker'）。datetimepicker（{format：'MMM-DD-YYYY'}; 
}）; 
< / script> 
 ... 
  

SOLVED !!! >

在将 f.label 移动到< div class = input-group dateid =datetimepicker> 。

  ... 
<％= f.label：departure_date％> 
< div class =input-group dateid =datetimepicker> 
<％= f.text_field：departure_date，class：'form-control'％> 
 ... 
  

解决方案

nice

 <％= f.text_field：departure_date，class：'form-control'，id：'datepicker'％> ; 
  

JS

  $（function（）{
 $（#datepicker）.datepicker（{
 dateFormat：yy-mm-dd
}）; 
} ）; 
  

只需点击输入字段，然后显示日历

I'd like to apply the Bootstrap3 Datetimepicker in my Rails4 app.

But the layout is not good like as this page (in the middle of the question image). Rails 4 x Bootstrap 3 Datetimepicker: replace default datetime_select with datetimepicker

It would be appreciated if you could give me any suggestion.

_xxx_form.html.erb

<%= simple_nested_form_for(@schedule) do |f| %>
  <div class="input-group date" id="datetimepicker">
    <%= f.label :departure_date %>
    <%= f.text_field :departure_date, class: 'form-control' %>
    <span class="input-group-addon">
      <span class="glyphicon-calendar glyphicon"></span>
    </span>
  </div>
  <script type="text/javascript">
    $(function () {
      $('#datetimepicker').datetimepicker({format:'MMM-DD-YYYY'});
    });
  </script>
    ...

SOLVED!!!

The layout was as I expected after moving f.label to outside of <div class="input-group date" id="datetimepicker">.

  ...
  <%= f.label :departure_date %>
  <div class="input-group date" id="datetimepicker">
    <%= f.text_field :departure_date, class: 'form-control' %>
  ...

解决方案

I think this simply nice

<%= f.text_field :departure_date, class: 'form-control', id: 'datepicker'%>

JS

$(function() {
    $( "#datepicker" ).datepicker({
        dateFormat: "yy-mm-dd"
    });
});

Just click input field then show calendar

这篇关于Rails 4 x Bootstrap 3 Datetimepicker：设计不好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！