Description: The time picker allows the user to quickly enter or select a time. The user can enter in a time through the text field by using the keyboard, or the user can select a time by using the time picker triggered by the time icon.

508 Guidelines: A time pickers uses the input field, which will follow the same guidelines as in the form elements section. To pass 508 compliance, the input field is considered the alternative view, which will allow a keyboard user to type in a time. The title attribute explains what time format must be used, for example, HH:MM.

TIP: To change the default settings, such as time format, edit the time picker.defaults in the js file, by changing to "true" or false", for example, to change from military time to AM or PM, edit showMeridian: false, to showMeridian: true

Tooltip
Javascript Code

<div class="form-group">
    <label for="timepicker">Time Picker</label>
    <div class="input-group bootstrap-timepicker">
        <span class="input-group-addon"><i class="fa fa-clock-o color-primary"></i></span>
        <input type="text" id="timepicker" class="form-control timepicker" title="Please enter in a time in the following format, HH:MM." placeholder="HH:MM" />
    </div>
</div>

Copy

$('.timepicker').timepicker({
    minuteStep: 1,
    appendWidgetTo: '.bootstrap-timepicker',
    showSeconds: false,
    showMeridian: false,
    defaultTime: "current"
});

Copy

Timepicker