| Expand | ||||||
|---|---|---|---|---|---|---|
| ||||||
|
Description
| Status | ||||||
|---|---|---|---|---|---|---|
|
Date and time pickers allow users to select a single or a range of dates and times.
A date picker is a combination of:
- Input - In the input field, the user can enter a date directly or select it using the date picker. The system validates the entry and provides the user with feedback. You can also show placeholder text in the field.
- Picker -The date picker lets users pick a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and the date picker. The control also allows users to navigate directly from one month or year to another. Input - The time input control allows users to enter a time.
Usage & Behavior
General guidelines
A date picker
States
Interaction
With one click on the input field, the date picker opens. To close the window, the user can select a date (which triggers the close event), or click outside the frame.
With the date picker, the user can see a day view, month view, or a year view. The current day is colored blue and the selected date are highlighted with a grey background and a blue border.
Validation & Errors
Best practices
| Expand | ||||
|---|---|---|---|---|
| ||||
TBD Related items:
|
Design
Current appearances in our products
| Expand | ||||
|---|---|---|---|---|
| ||||
WFM Calendar:
Calendar Group Adherence:
|
New LUX design
| Html macro | ||
|---|---|---|
| ||
<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> |