DatePicker

@ui5/webcomponents
<ui5-date-picker>

Basic DatePicker

<ui5-date-picker id="myDatepicker1"></ui5-date-picker>

DatePicker with Placeholder, Tooltip, Events, ValueState and valueStateMessage

The value is not valid. Please provide valid value
<ui5-date-picker id='myDatepicker2' placeholder='Delivery Date...' title='Delivery Date!'>
	<div slot="valueStateMessage">The value is not valid. Please provide valid value</div>
</ui5-date-picker>
<script>
	const dp = document.getElementById('myDatepicker2');
	dp.addEventListener('change', (e) => {
		dp.setAttribute('value-state', e.detail.valid ? 'None' : 'Error');
		console.log('change: ', e.detail);
	});
	dp.addEventListener('input', (e) => console.log('input: ', e.detail));
</script>
	

DatePicker with Minimum and Maximum Date - 1/1/2020 - 4/5/2020 format-pattern="dd/MM/yyyy"

<ui5-date-picker id="myDatepicker12" min-date="1/1/2020" max-date="4/5/2020" format-pattern="dd/MM/yyyy"></ui5-date-picker>

DatePicker with shortcuts: type "today" or "yesterday" and press "Enter"

<ui5-date-picker></ui5-date-picker>
	

DatePicker with format-pattern='short'

<ui5-date-picker format-pattern='short'></ui5-date-picker>
	

DatePicker with format-pattern='long'

<ui5-date-picker format-pattern='long'></ui5-date-picker>
	

DatePicker with format-pattern='QQQ yyyy, MMM dd', value='Q4 2018, Feb 14'

<ui5-date-picker format-pattern='QQQ yyyy, MMM dd' value='Q4 2018, Feb 14'></ui5-date-picker>
	

DatePicker with format-pattern='EEE, M/d/yyyy'

<ui5-date-picker format-pattern='EEE, M/d/yyyy'></ui5-date-picker>
	

Disabled DatePicker

<ui5-date-picker disabled></ui5-date-picker>
	

readonly DatePicker

<ui5-date-picker readonly></ui5-date-picker>
	

DatePicker with Japanese Calendar Type

<ui5-date-picker primary-calendar-type='Japanese'></ui5-date-picker>
	

DatePicker with Islamic Calendar Type

<ui5-date-picker primary-calendar-type='Islamic'></ui5-date-picker>
	

DatePicker with Buddhist Calendar Type

<ui5-date-picker primary-calendar-type='Buddhist'></ui5-date-picker>
	

Overview

The ui5-date-picker component provides an input field with assigned calendar which opens on user action. The ui5-date-picker allows users to select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and the date picker.

Usage

The user can enter a date by:
  • Using the calendar that opens in a popup
  • Typing it in directly in the input field


When the user makes an entry and chooses the enter key, the calendar shows the corresponding date. When the user directly triggers the calendar display, the actual date is displayed.

Formatting

If a date is entered by typing it into the input field, it must fit to the used date format.

Supported format options are pattern-based on Unicode LDML Date Format notation. For more information, see UTS #35: Unicode Locale Data Markup Language.

For example, if the format-pattern is "yyyy-MM-dd", a valid value string is "2015-07-30" and the same is displayed in the input.

Keyboard Handling

The ui5-date-picker provides advanced keyboard handling. If the ui5-date-picker is focused, you can open or close the drop-down by pressing F4, ALT+UP or ALT+DOWN keys. Once the drop-down is opened, you can use the UP, DOWN, LEFT, RIGHT arrow keys to navigate through the dates and select one by pressing the Space or Enter keys. Moreover you can use TAB to reach the buttons for changing month and year.
If the ui5-date-picker is focused and the picker dialog is not opened the user can increment or decrement the corresponding field of the JS date object referenced by dateValue propery by using the following shortcuts:
  • [PAGEDOWN] - Decrements the corresponding day of the month by one
  • [SHIFT] + [PAGEDOWN] - Decrements the corresponding month by one
  • [SHIFT] + [CTRL] + [PAGEDOWN] - Decrements the corresponding year by one
  • [PAGEUP] - Increments the corresponding day of the month by one
  • [SHIFT] + [PAGEUP] - Increments the corresponding month by one
  • [SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one

ES6 Module Import

import "@ui5/webcomponents/dist/DatePicker";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
dateValue (readonly)
date-value
Date
Currently selected date represented as JavaScript Date instance.
disabled
boolean
false
Determines whether the ui5-date-picker is displayed as disabled.
formatPattern
format-pattern
string
""
Determines the format, displayed in the input field.
hideWeekNumbers
hide-week-numbers
boolean
false
Defines the visibility of the week numbers column.

Note: For calendars other than Gregorian, the week numbers are not displayed regardless of what is set.
since v1.0.0-rc.8
maxDate
max-date
string
""
Determines the maximum date available for selection.
since v1.0.0-rc.6
minDate
min-date
string
""
Determines the minimum date available for selection.
since v1.0.0-rc.6
name
string
""
Determines the name with which the ui5-date-picker will be submitted in an HTML form.

Important: For the name property to have effect, you must add the following import to your project: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";

Note: When set, a native input HTML element will be created inside the ui5-date-picker so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form.
placeholder
string
undefined
Defines a short hint, intended to aid the user with data entry when the ui5-date-picker has no value.

Note: When no placeholder is set, the format pattern is displayed as a placeholder. Passing an empty string as the value of this property will make the ui5-date-picker appear empty - without placeholder or format pattern.
primaryCalendarType
primary-calendar-type
CalendarType
"Gregorian"
Determines the calendar type. The input value is formated according to the calendar type and the picker shows the months and years from the specified calendar.

Available options are:
  • Gregorian
  • Islamic
  • Japanese
  • Buddhist
  • Persian
readonly
boolean
false
Determines whether the ui5-date-picker is displayed as read-only.
required
Boolean
false
Defines whether the ui5-date-picker is required.
since v1.0.0-rc.9
value
string
""
Defines a formatted date value.
valueState
value-state
ValueState
"None"
Defines the value state of the ui5-date-picker.

Available options are:
  • None
  • Error
  • Warning
  • Success
  • Information

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
valueStateMessage
HTMLElement
Defines the value state message that will be displayed as pop up under the ui5-date-picker.

Note: If not specified, a default text (in the respective language) will be displayed.
Note: The valueStateMessage would be displayed, when the ui5-date-picker is in Information, Warning or Error value state.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
change
Fired when the input operation has finished by pressing Enter or on focusout.
input
Fired when the value of the ui5-date-picker is changed at each key stroke.

Methods

This Web Component exposes public methods. You can invoke them directly on the Web Component instance.

Name
Description
closePicker
Closes the picker.
formatValue
Formats a Java Script date object into a string representing a locale date according to the formatPattern property of the DatePicker instance
oDate
type: object
description: A Java Script date object to be formatted as string
isInValidRange
Checks if a date is in range between minimum and maximum date.
value
type: object
description:
isOpen
Checks if the picker is open.
isValid
Checks if a value is valid against the current date format of the DatePicker.
value
type: string
description: A value to be tested against the current date format
openPicker
Opens the picker.
options
type: object
description: A JSON object with additional configuration.
{ focusInput: true } By default, the focus goes in the picker after opening it. Specify this option to focus the input field.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel