Class DatePicker

packages/main/src/DatePicker.ts:183–1101

* @class * * ### 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 t

 */

@customElement({
	tag: "ui5-date-picker",
	languageAware: true,
	formAssociated: true,
	template: DatePickerTemplate,
	styles: [
		datePickerCss,
		ResponsivePopoverCommonCss,
		datePickerPopoverCss,
		ValueStateMessageCss,
	],
})
/**
 * Fired when the input operation has finished by pressing Enter or on focusout.
 * @public
 * @param {string} value The submitted value.
 * @param {boolean} valid Indicator if the value is in correct format pattern and in valid range.
 */
@event("change", {
	bubbles: true,
	cancelable: true,
})
/**
 * Fired when the value of the component is changed at each key stroke.
 * @public
 * @param {string} value The submitted value.
 * @param {boolean} valid Indicator if the value is in correct format pattern and in valid range.
 */
@event("input", {
	bubbles: true,
	cancelable: true,
})
/**
 * 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.
 * @public
 * @param {string} valueState The new `valueState` that will be set.
 * @param {boolean} valid Indicator if the value is in correct format pattern and in valid range.
 */
@event("value-state-change", {
	bubbles: true,
	cancelable: true,
})
/**
 * Fired after the component's picker is opened.
 * @since 2.4.0
 * @public
 */
@event("open")
/**
 * Fired after the component's picker is closed.
 * @since 2.4.0
 * @public
 */
@event("close")
class DatePicker extends DateComponentBase implements IFormInputElement {
	eventDetails!: DateComponentBase["eventDetails"] & {