Time picker

Time pickers are used to select or edit time or amount of hours. Time pickers can be set to a specific time or can choose from preset alternatives. Time pickers can be used independently or in combination with date pickers. Read more about pime picker in the UX Guidelines.

Use when

To display time related information.
The user needs to select or enter time.
The user needs to select or enter amount of hours.
The user needs to edit time or amount of hours.

The functionality for this component, i.e. the script, is not provided. The documentation has a demo functionality that you can draw inspiration from in your work.

Design

                  

<div class="form-group timepicker-wrapper">
    <label for="timeExample" aria-label="Select the time">Select time</label>
    <input type="text" id="timeExample" class="form-control timepicker" placeholder="Select time" autocomplete="off">
    <button type="button" class="timepicker-btn" aria-label="Open time dropdown">
        <span class="vismaicon vismaicon-timepicker"></span>
    </button>
    <div class="dropdown-menu">
        <ul class="timepicker-list">
            <li class="timepicker-am dropdown-item" tabindex="1">12:00am</li>
            ...
        </ul>
    </div>
</div>