Description

Date picker allows users to select or enter a single date at a required format.

Verint LUX Design System > Date Picker > New Contact Message.png

Usage & Behavior

General guidelines

Structure

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.
- If there is no default date, the input will show a hint text indicating the desired format (for example - “dd/mm/yyyy”).
Date picker icon - clicking the icon opens the calendar
Calendar Picker -The date picker calendar lets users pick a date using touch, mouse, or keyboard input. The control also allows users to navigate directly from one month or year to another.

States

Input

State	Visual
Regular
Hover
Active
Selected
Disabled
Error
Warning
Focused
Focused, Hover
Focused, Active
Focused, Disabled

Calendar
- The current day and the selected date are highlighted as follows:
- Disabled dates - The calendar may contain dates which the user cannot select. Those dates will be disabled.
- A month may start/end at the beginning/end of the week but not necessarily. This means that slots from previous or next months will be shown using a different color.

State	Visual
General (x2)
Regular (x2)
Hover (x2)
Active (x2)
Selected (x2)
Disabled (x2)
Today (x2)

Interaction

Input
- The date picker can have an initial value that the user can overwrite at any time.
- Open the calendar with one click on the picker button.
Calendar
- Close the calendar either by choosing a date (clicking on it), or clicking outside the frame.
- Clicking the left and right arrows on the calendar moves between the months, respectively.

Validation and Errors

Please refer to Field validation page for more information.

A date field with a warning will have an orange border and a warning icon, as displayed below:

Verint LUX Design System > Date Picker > DP WarnSamp.png

A date field with an error will have a red border and an error icon, as displayed below:

Verint LUX Design System > Date Picker > DP ErrSamp.png

Best practices

Provide a help text that gives the user an idea of the required date format is a way of preventing input errors.
Use a loose format - If the user enters a different date format in the input field (for example - “12.03.20“) the system will switch to the standard format when the field loses focus.

Design

Zeplin Link	Thumbnail
https://zpl.io/aNXBPk2

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>