Description
ONGOING
A time picker allows the user to either insert time manually or set hours and minutes using up/down arrows.
Usage & Behavior
General guidelines
Structure
A time picker is a combination of:
Time input field - In the input field, the user can enter a time directly.
Time picker button - clicking the picker opens the time picker dropdown.
UP/Down arrows - Clicking those arrows increases/decreases the hours/minutes accordingly.
AM/PM label - Clicking this toggles between AM/PM.
States
Interaction
Input
The time picker can have an initial value that the user can overwrite at any time.
Open the picker dropdown with one click on the picker button.
Close the picker dropdown by clicking outside the frame.
Popover
Click the up/down arrows to move between the hours/minutes accordingly.
The iteration is cyclic. For example:
hours - when you are set on “12” hours and click to “up” arrow, you start from “1”.
minutes - when you are set on “00” and press the “down” arrow you get “59”.
Clicking AM/PM label toggles between the 2 options.
Changing values in the popover, updates the input respectively.
Validation and Errors
Please refer to Field validation page for more information.
A time field with a warning will have an orange border and a warning icon, as displayed below:
A time field with an error will have a red border and an error icon, as displayed below:
Best practices
Use a time picker when:
You want the user to select a time or set a time.
You want the user to select a time range. In this case, one time picker can be used to set the starting time and a second one to set the end time.
questions (http://mytechtipdemo.appspot.com/timepicker/):
do we only suggest 12 hour format (meridian selection)? or also 24 hour (removing AM/PM)?
should we add an option to cancel?
Design
Zeplin Link | Thumbnail |
|---|---|
Add an updated ZEPLIN |
Current appearances in our products
Calendar Group Adherence:
New LUX design
<link rel="stylesheet" href="https://ux.verint.com/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">
<div class="card">
<div class="card-header">Date Picker <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
<div class="card-body">
<form>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
<div class="col-lg-4">
<input type="date" class="form-control form-control-sm" placeholder="Guiding Text">
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="date" class="form-control form-control-sm" placeholder="Guiding Text"></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm"></label>
<div class="col-lg-4">
<input type="date" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text">
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="date" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text"></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled</label>
<div class="col-lg-4">
<input type="date" class="form-control form-control-sm" placeholder="Guiding Text" disabled>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="date" class="form-control form-control-sm" placeholder="Guiding Text" disabled></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm"></label>
<div class="col-lg-4">
<input type="date" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text" disabled>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="date" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text" disabled></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Read-Only</label>
<div class="col-lg-4">
<input type="date" class="form-control form-control-sm" placeholder="Guiding Text" readonly>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="date" class="form-control form-control-sm" placeholder="Guiding Text" readonly></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm"></label>
<div class="col-lg-4">
<input type="date" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text" readonly>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="date" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text" readonly></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Error</label>
<div class="col-lg-4">
<input type="date" class="form-control form-control-sm is-invalid" placeholder="Guiding Text">
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="date" class="form-control form-control-sm is-invalid" placeholder="Guiding Text"></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm"></label>
<div class="col-lg-4">
<input type="date" class="form-control form-control-sm is-invalid" placeholder="Guiding Text" value="Filled Text">
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="date" class="form-control form-control-sm is-invalid" placeholder="Guiding Text" value="Filled Text"></script></code></pre>
</div>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-header">Time Picker</div>
<div class="card-body">
<form>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
<div class="col-lg-4">
<input type="time" class="form-control form-control-sm" placeholder="Guiding Text">
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="time" class="form-control form-control-sm" placeholder="Guiding Text"></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm"></label>
<div class="col-lg-4">
<input type="time" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text">
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="time" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text"></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled</label>
<div class="col-lg-4">
<input type="time" class="form-control form-control-sm" placeholder="Guiding Text" disabled>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="time" class="form-control form-control-sm" placeholder="Guiding Text" disabled></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm"></label>
<div class="col-lg-4">
<input type="time" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text" disabled>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="time" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text" disabled></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Read-Only</label>
<div class="col-lg-4">
<input type="time" class="form-control form-control-sm" placeholder="Guiding Text" readonly>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="time" class="form-control form-control-sm" placeholder="Guiding Text" readonly></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm"></label>
<div class="col-lg-4">
<input type="time" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text" readonly>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="time" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text" readonly></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Error</label>
<div class="col-lg-4">
<input type="time" class="form-control form-control-sm is-invalid" placeholder="Guiding Text">
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="time" class="form-control form-control-sm is-invalid" placeholder="Guiding Text"></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm"></label>
<div class="col-lg-4">
<input type="time" class="form-control form-control-sm is-invalid" placeholder="Guiding Text" value="Filled Text">
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="time" class="form-control form-control-sm is-invalid" placeholder="Guiding Text" value="Filled Text"></script></code></pre>
</div>
</div>
</form>
</div>
</div>