DateRangePicker

<ui5-daterange-picker> | Since 1.0.0-rc.8

The DateRangePicker enables the users to enter a localized date range using touch, mouse, keyboard input, or by selecting a date range in the calendar.

Usage

The user can enter a date by: Using the calendar that opens in a popup or typing it in directly in the input field (not available for mobile devices). For the ui5-daterange-picker

ES6 Module Import

import "@ui5/webcomponents/dist/DateRangePicker.js";

Keyboard Handling

The ui5-daterange-picker provides advanced keyboard handling.

When the ui5-daterange-picker input field is focused the user can increment or decrement respectively the range start or end date, depending on where the cursor is. The following shortcuts are available:

• [Page Down] - Decrements the corresponding day of the month by one
• [Shift] + [Page Down] - Decrements the corresponding month by one
• [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one
• [Page Up] - Increments the corresponding day of the month by one
• [Shift] + [Page Up] - Increments the corresponding month by one
• [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one

Basic Sample

Properties

delimiter

Description	Determines the symbol which separates the dates. If not supplied, the default time interval delimiter for the current locale will be used.
Type	string
Default	"-"

dateValue

Description	Note: The getter method is inherited and not supported. If called it will return an empty value.
Type	Date | null
Default	null
Readonly	true

dateValueUTC

Description	Note: The getter method is inherited and not supported. If called it will return an empty value.
Type	Date | null
Default	null
Readonly	true

startDateValue

Description	Returns the start date of the currently selected range as JavaScript Date instance.
Type	Date | null
Default	null
Readonly	true

endDateValue

Description	Returns the end date of the currently selected range as JavaScript Date instance.
Type	Date | null
Default	null
Readonly	true

value

Description	Defines a formatted date value.
Type	string
Default	""

valueState

Description	Defines the value state of the component.
Type	"None" | "Positive" | "Critical" | "Negative" | "Information"
Default	"None"

required

Description	Defines whether the component is required.
Type	boolean
Default	false
Since	1.0.0-rc.9

disabled

Description	Determines whether the component is displayed as disabled.
Type	boolean
Default	false

readonly

Description	Determines whether the component is displayed as read-only.
Type	boolean
Default	false

placeholder

Description	Defines a short hint, intended to aid the user with data entry when the component 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 component appear empty - without placeholder or format pattern.
Type	string | undefined
Default	undefined

name

Description	Determines the name by which the component will be identified upon submission in an HTML form. Note: This property is only applicable within the context of an HTML Form element.
Type	string | undefined
Default	undefined

hideWeekNumbers

Description	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.
Type	boolean
Default	false
Since	1.0.0-rc.8

open

Description	Defines the open or closed state of the popover.
Type	boolean
Default	false
Since	2.0.0

accessibleName

Description	Defines the aria-label attribute for the component.
Type	string | undefined
Default	undefined
Since	1.0.0-rc.15

accessibleNameRef

Description	Receives id(or many ids) of the elements that label the component.
Type	string | undefined
Default	undefined
Since	1.0.0-rc.15

primaryCalendarType

Description	Sets a calendar type used for display. If not set, the calendar type of the global configuration is used.
Type	"Gregorian" | "Islamic" | "Japanese" | "Buddhist" | "Persian" | undefined
Default	undefined

secondaryCalendarType

Description	Defines the secondary calendar type. If not set, the calendar will only show the primary calendar type.
Type	"Gregorian" | "Islamic" | "Japanese" | "Buddhist" | "Persian" | undefined
Default	undefined
Since	1.0.0-rc.16

formatPattern

Description	Determines the format, displayed in the input field.
Type	string | undefined
Default	undefined

minDate

Description	Determines the minimum date available for selection. Note: If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).
Type	string
Default	""
Since	1.0.0-rc.6

maxDate

Description	Determines the maximum date available for selection. Note: If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).
Type	string
Default	""
Since	1.0.0-rc.6

calendarWeekNumbering

Description	Defines how to calculate calendar weeks and first day of the week. If not set, the calendar will be displayed according to the currently set global configuration.
Type	"Default" | "ISO_8601" | "MiddleEastern" | "WesternTraditional"
Default	"Default"
Since	2.2.0

Slots

valueStateMessage

Description	Defines the value state message that will be displayed as pop up under the component. Note: If not specified, a default text (in the respective language) will be displayed. Note: The valueStateMessage would be displayed, when the component is in Information, Critical or Negative value state.
Type	Array<HTMLElement>
Since	1.0.0-rc.7

Events

change

Description	Fired when the input operation has finished by pressing Enter or on focusout.
Type	CustomEvent<DatePickerChangeEventDetail>
Parameters	value: string The submitted value. valid: boolean Indicator if the value is in correct format pattern and in valid range.
Bubbles	Yes
Cancelable	Yes - via preventDefault()

input

Description	Fired when the value of the component is changed at each key stroke.
Type	CustomEvent<DatePickerInputEventDetail>
Parameters	value: string The submitted value. valid: boolean Indicator if the value is in correct format pattern and in valid range.
Bubbles	Yes
Cancelable	Yes - via preventDefault()

value-state-change

Description	Fired before the value state of the component is updated internally. The event is preventable, meaning that if it's default action is prevented, the component will not update the value state.
Type	CustomEvent<DatePickerValueStateChangeEventDetail>
Parameters	valueState: string The new valueState that will be set. valid: boolean Indicator if the value is in correct format pattern and in valid range.
Bubbles	Yes
Cancelable	Yes - via preventDefault()

open

Description	Fired after the component's picker is opened.
Type	CustomEvent
Since	2.4.0
Bubbles	No
Cancelable	No

close

Description	Fired after the component's picker is closed.
Type	CustomEvent
Since	2.4.0
Bubbles	No
Cancelable	No

Methods

isValid

Description	Checks if a value is valid against the current date format of the DatePicker.
Return type	boolean
Parameters	value: string A value to be tested against the current date format

isInValidRange

Description	Checks if a date is between the minimum and maximum date.
Return type	boolean
Parameters	value: string A value to be checked

formatValue

Description	Formats a Java Script date object into a string representing a locale date according to the formatPattern property of the DatePicker instance
Return type	string
Parameters	date: Date A Java Script date object to be formatted as string

CSS Parts

No CSS parts available for this component.

More Samples

Date Formats

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

Min and Max Dates

Define min and max date boundaries to contrain user choice.