Rails 4 x Bootstrap 3 Datetimepicker: design is no

问题:

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' %>
  ...

回答1:

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