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.

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>