<div class="grid-x grid-padding-x">
    <div class="small-12  medium-6 cell">
        <label>Start Date
        <input type="text"
            name="calendarEvent[startDate][date]"
            value="{{ event.startDate.format('F d, Y')|default }}"
            placeholder="{{ dateFormat }}"
            class="form-control date-picker" />
        </label>
    </div><!-- /.small-6 cell -->
    <div class="small-12 medium-6 cell">
        <label>Start Time
        <input type="text"
            value="{{ event.startDate.format('h:i A')|default }}"
            name="calendarEvent[startDate][time]"
            placeholder="12:00 PM"
            class="form-control time-picker" />
        </label>
    </div><!-- /.small-6 cell -->
</div><!-- /.grid-x grid-padding-x -->

<div class="grid-x grid-padding-x">
    <div class="small-12  medium-6 cell">
        <label>End Date
        <input type="text"
                value="{{ event.endDate.format('F d, Y')|default }}"
                name="calendarEvent[endDate][date]"
                placeholder="{{ dateFormat }}"
                class="form-control date-picker" />
        </label>
    </div><!-- /.small-6 cell -->
    <div class="small-12 medium-6 cell">
        <label>End Time
        <input type="text"
            value="{{ event.endDate.format('h:i A')|default }}"
            name="calendarEvent[endDate][time]"
            placeholder="12:00 PM"
            class="form-control time-picker" />
        </label>
    </div><!-- /.small-6 cell -->
</div><!-- /.grid-x grid-padding-x -->