DatePicker

@ui5/webcomponents
<ui5-datepicker>

Basic DatePicker

<ui5-datepicker id="myDatepicker1"></ui5-datepicker>

DatePicker with Placeholder, Tooltip, Events, and ValueState

<ui5-datepicker id="myDatepicker2" placeholder='Delivery Date...' title='Delivery Date!'></ui5-datepicker>
<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 shortcuts: type "today" or "yesterday" and press "Enter"

<ui5-datepicker></ui5-datepicker>
	

DatePicker with format-pattern='short'

<ui5-datepicker format-pattern='short'></ui5-datepicker>
	

DatePicker with format-pattern='long'

<ui5-datepicker format-pattern='long'></ui5-datepicker>
	

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

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

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

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

Disabled DatePicker

<ui5-datepicker disabled></ui5-datepicker>
	

readonly DatePicker

<ui5-datepicker readonly></ui5-datepicker>
	

DatePicker with Japanese Calendar Type

<ui5-datepicker primary-calendar-type='Japanese'></ui5-datepicker>
	

DatePicker with Islamic Calendar Type

<ui5-datepicker primary-calendar-type='Islamic'></ui5-datepicker>
	

DatePicker with Buddhist Calendar Type

<ui5-datepicker primary-calendar-type='Buddhist'></ui5-datepicker>
	

Overview

The ui5-datepicker component provides an input field with assigned calendar which opens on user action. The ui5-datepicker 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-datepicker provides advanced keyboard handling. If the ui5-datepicker 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.

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-datepicker is displayed as disabled.
formatPattern
format-pattern
string
""
Determines the format, displayed in the input field.
name
string
""
Determines the name with which the ui5-datepicker 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-datepicker 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-datepicker 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-datepicker appear empty - without placeholder or format pattern.
primaryCalendarType
primary-calendar-type
string
Determines the calendar type. The input value is formated according to the calendar type and the picker shows months and years from the specified calendar. Available options are: "Gregorian", "Islamic", "Japanese", "Buddhist" and "Persian".
readonly
boolean
false
Determines whether the ui5-datepicker is displayed as readonly.
value
string
""
Defines a formatted date value.
valueState
value-state
string
"None"
Visualizes the validation state of the Web Component, for example Error, Warning and Success.

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-datepicker 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.
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: Fiori 3 Belize High Contrast Black
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel