Versions Compared

Version Old Version 41 New Version 42
Changes made by

Liav Nadler

Carlie Bradshaw

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

Description

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

Table of Contents

Description

Date pickers allow the user to either select or manually enter a single date. 

Usage & Behavior

General guidelines

Structure

A date picker is a combination Date pickers consist of:

  • Input

    In the

    Date input field

    , the user can enter a date directly or select it using the date picker.

    . The date can be directly edited here, in the required format. If there is no default date, the input will show a hint text indicating the desired format (for example

    - “dd

    , dd/mm/

    yyyy”

    yyyy).

  • Date picker icon - clicking the icon button. A calendar Icon Button which opens the calendar drop-down.

  • Calendar Picker -The date picker calendar lets users pick a drop-down, which consists of:

    • Month calendar, which allows the user to pick a specific date using touch, mouse, or keyboard input.

    The control also allows users to navigate directly from one month or year to another. 

States

  • Input

    • Month and Year pickers, which allow the user to directly select a specific month or year. 

    • Left and Right arrows, which allow the user to navigate backward or forward one month at a time.

States

Date input field

State

Visual

Regular

Hover

Active

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

    should 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

    Days from the previous or next month, seen in the first or last weeks, should be shown using a different color.

State

Visual

General

Regular (x2)

Hover (x2)

Active (x2)

Selected (x2)

Disabled (x2)

Today (x2)

Image Removed

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

...

Image Added

Interaction

The date can be set either via direct input or by using the controls in the calendar drop-down.

Direct input

  • The date picker can have an initial value, which the user can edit at any time.

  • Clicking the date input field will change it a Text Field, where the user can directly type the required value.

  • Allow the user to enter dates in loose formats, where possible, which should be automatically corrected when the field loses focus.

    • e.g. 12.03.20 and 12/3/20 should both be corrected to 12/03/2020.

Calendar drop-down

  • Clicking on the calendar Icon Button will open the calendar drop-down.

  • The calendar drop-down will be closed either:

    • when a date is selected, or

    • by clicking outside the calendar drop-down.

  • Clicking the left and right arrows on the calendar moves backwards and forwards 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: 

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

Best practices

  • Provide a help text that gives the user an idea of which shows 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. This will help to prevent input errors.

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Design

Zeplin Link

Thumbnail

https://zpl.io/aNXBPk2

New LUX design 

Html macro
sanitizefalse
<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>

...