Date pickers allow the user to either select or manually enter a single date.
|
Date pickers consist of:
Date input field. 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/mm/yyyy).
Date picker button. A calendar Icon Button which opens the calendar drop-down.
Calendar drop-down, which consists of:
Month calendar, which allows the user to pick a specific date using mouse or keyboard input.
Month and Year selectors, 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.
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.
The calendar may contain dates which the user cannot select. Those dates should be disabled.
Days from the previous or next month, seen in the first or last weeks, should be greyed out (with the cursor still shown as a hand).
State | Visual | |
|---|---|---|
General |  | |
Regular (x2 in size) |  | |
Hover (x2 in size) |  | |
Active (x2 in size) |  | |
Selected (x2 in size) |  | |
Disabled / Greyed out (x2 in size) |  | In case of greyed out the cursor will still be shown as a hand |
Today (x2 in size) |  |
The date can be set either via direct input or by using the controls in the calendar selectors.
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 to 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.
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:
 |
Provide a help text which shows the required date format. This will help to prevent input errors.
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Zeplin Link | Thumbnail |
|---|---|
 |
<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" value="2017-08-03">
</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" value="2017-08-03"></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" value="2017-08-03" 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" value="2017-08-03" 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" value="2017-08-03" 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" value="2017-08-03" 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" value="2017-08-03">
</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" value="2017-08-03"></script></code></pre>
</div>
</div>
</form>
</div>
</div> |