Trent Richardson Datetimepicker not working properly

Question

I've included Trent Richardsons Datetimepicker in my rails project but after loading the page the div containing the datetimepicker already shows. I thinks it should show only when clicked but not before. Here's a screenshot:

code containing the datetimepicker:

<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-6" id="event_enddate_group"> <div class="controls"> <%= f.label :enddate, :class => 'control-label' %> <div class='input-group date' id='datetimepicker_enddate'> <%= f.text_field :enddate, :class => 'form-control'%> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> <script type="text/javascript"> $(function () { $('#event_enddate').datetimepicker({ locale: 'nl' }); }); </script> </div> </div> </div>

changed above code. Now datetimepicker is displaying at correct moment but layout still is wrong.

Answer 1

<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-6" id="event_enddate_group">
        <div class="controls">
          <%= f.label :enddate, :class => 'control-label' %>
          <div class='input-group date' id='datetimepicker_enddate'>
            <%= f.text_field :enddate, :class => 'form-control event_enddate' %>
            <span class="input-group-addon">
              <span class="glyphicon glyphicon-calendar"></span>
            </span>
            <script type="text/javascript">
                $(function () {
                    $('.event_enddate').datetimepicker({
                        locale: 'nl'
                    });
                });
            </script>
          </div>
        </div>
      </div>

always use class instead of id while doing any jquery or javascript functioning