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.

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.

<div class="row">
   <form class="col-md-6">
      <div class="form-group timepicker-wrapper">
         <label for="timeExample">Select time</label>
         <input class="form-control timepicker" id="timeExample" placeholder="Select time" autocomplete="off" type="text">
         <button type="button" class="timepicker-btn" aria-label="Open time dropdown">
            <span class="spirisicon spirisicon-sm spirisicon-chevron-down"></span>
         </button>
      </div>
   </form>
</div>