<li class="datepair">
  <label for="">Date and Time*</label>

  <input type="text" class="datepicker start_at" placeholder="Start Date" data-fill="#<%= f.model_name.underscore %>_start_at">
  <input type="text" class="timepicker start_at" placeholder="Start Time" data-fill="#<%= f.model_name.underscore %>_start_at">

  <span>to</span>

  <input type="text" class="timepicker end_at" placeholder="End Time" data-fill="#<%= f.model_name.underscore %>_end_at">
  <input type="text" class="datepicker end_at" placeholder="End Date" data-fill="#<%= f.model_name.underscore %>_end_at">

  <ul>
    <%= f.input :start_at, :as => :hidden,
          :value => f.object.start_at.try(:strftime, '%b %d, %Y %I:%M %P'),
          :input_html => {
            :data => {
              :date => f.object.start_at.try(:strftime, '%b %d, %Y'),
              :time => f.object.start_at.try(:strftime, '%I:%M %P')
            }
          } %>

    <%= f.input :end_at, :as => :hidden,
          :value => f.object.end_at.try(:strftime, '%b %d, %Y %I:%M %P'),
          :input_html => {
            :data => {
              :date => f.object.end_at.try(:strftime, '%b %d, %Y'),
              :time => f.object.end_at.try(:strftime, '%I:%M %P')
            }
          } %>
  </ul>
</li>