本文介绍了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:设计不好的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-20 01:48