VA Pattern Library

Time Picker 

<!-- SASS: src/stylesheets/_components/time-picker.scss -->
<!-- JS: src/js/time-picker.js -->
<!-- Vendor JS: src/js/_vendor/bootstrap-timepicker.js -->

<fieldset>
    <legend>Set a Time</legend>

    <label for="startTime">Start Time</label>
    <span class="usa-form-hint">For example: HH:MM AM/PM</span>
    <!-- Timepicker input start -->
    <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>
    <!-- Timepicker input end -->
</fieldset>

<fieldset>

    <label for="endTime">End Time</label>
    <span class="usa-form-hint">For example: HH:MM AM/PM</span>
    <!-- Timepicker input start -->
    <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>
    <!-- Timepicker input end -->
</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">