DateTimePicker with format-pattern
DateTimePicker in states
DateTimePickercomponent alows users to select both date (day, month and year) and time (hours, minutes and seconds) and for the purpose it consists of input field and Date/Time picker.
DateTimePickerif you need a combined date and time input component. Don't use it if you want to use either date, or time value. In this case, use the
The user can set date/time by:
- using the calendar and the time selectors
- typing in the input field
DateTimePicker, use the
As most of the input based components, the
DateTimePickersupports properties, such as:
FormattingThe value entered by typing into the input field must fit to the used date/time format.
Supported format options are pattern-based on Unicode LDML Date Format notation. For more information, see
Example: the following format
dd/MM/yyyy, hh:mm:ss aacorresponds the
13/04/2020, 03:16:16 AMvalue.
The small 'h' defines "12" hours format and the "aa" symbols - "AM/PM" time periods.
Example: the following format
dd/MM/yyyy, HH:mm:sscorresponds the
The capital 'H' indicates "24" hours format.
Note: If the
formatPatterndoes NOT include time, the
DateTimePickerwill fallback to the default time format according to the locale.
Note: If no placeholder is set to the
DateTimePicker, the current
formatPatternis displayed as a placeholder. If another placeholder is needed, it must be set or in case no placeholder is needed - it can be set to an empty string.
Note: If the user input does NOT match the
DateTimePickermakes an attempt to parse it based on the locale settings.
DateTimePickeris responsive and fully adapts to all devices. For larger screens, such as tablet or desktop, it is displayed as a popover, while on phone devices, it is displayed full screen.
ES6 Module Import
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.
ui5-date-pickeris displayed as disabled.
Note: For calendars other than Gregorian, the week numbers are not displayed regardless of what is set.
ui5-date-pickerwill be submitted in an HTML form.
Important: For the
nameproperty to have effect, you must add the following import to your project:
Note: When set, a native
inputHTML element will be created inside the
ui5-date-pickerso that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form.
ui5-date-pickerhas 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-pickerappear empty - without placeholder or format pattern.
ui5-date-pickeris displayed as read-only.
Available options are:
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
Note: If not specified, a default text (in the respective language) will be displayed.
valueStateMessagewould be displayed, when the
This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as
ui5-date-pickeris changed at each key stroke.
This Web Component exposes public methods. You can invoke them directly on the Web Component instance.
formatPatternproperty of the DatePicker instance
description: A Java Script date object to be formatted as string
description: A value to be tested against the current date format