@ui5/webcomponents-react

import '@ui5/webcomponents/dist/DatePicker.js'; import type { DatePickerChangeEventDetail, DatePickerInputEventDetail, DatePickerValueStateChangeEventDetail } from '@ui5/webcomponents/dist/DatePicker.js'; import type CalendarWeekNumbering from '@ui5/webcomponents/dist/types/CalendarWeekNumbering.js'; import type CalendarType from '@ui5/webcomponents-base/dist/types/CalendarType.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface DatePickerAttributes { /** * Defines the aria-label attribute for the component. * @default undefined */ accessibleName?: string | undefined; /** * Receives id(or many ids) of the elements that label the component. * @default undefined */ accessibleNameRef?: string | undefined; /** * 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. * * **Note:** Available since [v2.2.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.2.0) of **@ui5/webcomponents**. * @default "Default" */ calendarWeekNumbering?: CalendarWeekNumbering | keyof typeof CalendarWeekNumbering; /** * Determines whether the component is displayed as disabled. * @default false */ disabled?: boolean; /** * Determines the format, displayed in the input field. * @default undefined */ formatPattern?: string | undefined; /** * 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. * @default false */ hideWeekNumbers?: boolean; /** * 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). */ maxDate?: string; /** * 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). */ minDate?: string; /** * 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. * @default undefined */ name?: string | undefined; /** * Defines the open or closed state of the popover. * * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. * @default false */ open?: boolean; /** * 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. * @default undefined */ placeholder?: string | undefined; /** * Sets a calendar type used for display. * If not set, the calendar type of the global configuration is used. * @default undefined */ primaryCalendarType?: CalendarType | undefined | keyof typeof CalendarType; /** * Determines whether the component is displayed as read-only. * @default false */ readonly?: boolean; /** * Defines whether the component is required. * @default false */ required?: boolean; /** * Defines the secondary calendar type. * If not set, the calendar will only show the primary calendar type. * @default undefined */ secondaryCalendarType?: CalendarType | undefined | keyof typeof CalendarType; /** * Defines a formatted date value. */ value?: string; /** * Defines the value state of the component. * @default "None" */ valueState?: ValueState | keyof typeof ValueState; } interface DatePickerDomRef extends Required<DatePickerAttributes>, Ui5DomRef { /** * Currently selected date represented as a Local JavaScript Date instance. */ readonly dateValue: Date | null; /** * Formats a Java Script date object into a string representing a locale date * according to the `formatPattern` property of the DatePicker instance * @param {Date} date - A Java Script date object to be formatted as string * @returns {string} - The date as string */ formatValue: (date: Date) => string; /** * Checks if a date is between the minimum and maximum date. * @param {string} value - A value to be checked * @returns {boolean} */ isInValidRange: (value: string) => boolean; /** * Checks if a value is valid against the current date format of the DatePicker. * @param {string} value - A value to be tested against the current date format * @returns {boolean} */ isValid: (value: string) => boolean; } interface DatePickerPropTypes extends DatePickerAttributes, Omit<CommonProps, keyof DatePickerAttributes | 'valueStateMessage' | 'onChange' | 'onInput' | 'onValueStateChange'> { /** * 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. * * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="valueStateMessage"`). * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers. * * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. * Learn more about it [here](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). */ valueStateMessage?: UI5WCSlotsNode; /** * Fired when the input operation has finished by pressing Enter or on focusout. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. */ onChange?: (event: Ui5CustomEvent<DatePickerDomRef, DatePickerChangeEventDetail>) => void; /** * Fired when the value of the component is changed at each key stroke. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. */ onInput?: (event: Ui5CustomEvent<DatePickerDomRef, DatePickerInputEventDetail>) => void; /** * 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. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. */ onValueStateChange?: (event: Ui5CustomEvent<DatePickerDomRef, DatePickerValueStateChangeEventDetail>) => void; } /** * The `DatePicker` component provides an input field with assigned calendar which opens on user action. * The `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 presses 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](http://unicode.org/reports/tr35/#Date_Field_Symbol_Table). * * 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 `DatePicker` provides advanced keyboard handling. * If the `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] or [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 `DatePicker` input field is focused and its corresponding picker dialog is not opened, * then users can increment or decrement the date referenced by `dateValue` property * by using the following shortcuts: * * - [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 * * ### Calendar types * The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian. * By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar, * you need to set the `primaryCalendarType` property and import one or more of the following modules: * * `import "@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js";` * * `import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js";` * * `import "@ui5/webcomponents-localization/dist/features/calendar/Japanese.js";` * * `import "@ui5/webcomponents-localization/dist/features/calendar/Persian.js";` * * Or, you can use the global configuration and set the `calendarType` key: * * ```html * <script data-id="sap-ui-config" type="application/json"> * { * "calendarType": "Japanese" * } * <script> * ``` * * * * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) */ declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerPropTypes & import("../../internal/withWebComponent.js").WithWebComponentPropTypes & import("react").RefAttributes<DatePickerDomRef>>; export { DatePicker }; export type { DatePickerDomRef, DatePickerPropTypes };