<fieldset>
<legend>Set a Time</legend>
<label for="startTime">Start Time</label>
<span class="usa-form-hint">For example: HH:MM AM/PM</span>
<div class="vaux-time-picker-input" data-timepicker-trigger>
<input id="startTime" name="startTime" type="text" aria-expanded="false" />
<button class="usa-button" aria-label="Open Clock"><i class="fa fa-clock-o" aria-hidden="true"></i></button>
</div>
</fieldset>
<fieldset>
<label for="endTime">End Time</label>
<span class="usa-form-hint">For example: HH:MM AM/PM</span>
<div class="vaux-time-picker-input" data-timepicker-trigger>
<input id="endTime" name="endTime" type="text" aria-expanded="false" />
<button class="usa-button" aria-label="Open Clock"><i class="fa fa-clock-o" aria-hidden="true"></i></button>
</div>
</fieldset>
<label for="lunchTime">Time of lunch</label>
<span class="usa-form-hint">For example: HH:MM AM/PM</span>
<input id="lunchTime" name="lunchTime" type="time">