@ui5/webcomponents-react

import '@ui5/webcomponents/dist/TimePicker.js'; import type { TimePickerChangeEventDetail, TimePickerInputEventDetail } from '@ui5/webcomponents/dist/TimePicker.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; interface TimePickerAttributes { /** * Defines the accessible description of the component. * * **Note:** Available since [v2.14.0](https://github.com/UI5/webcomponents/releases/tag/v2.14.0) of **@ui5/webcomponents**. * @default undefined */ accessibleDescription?: string | undefined; /** * Receives id(or many ids) of the elements that describe the input. * * **Note:** Available since [v2.14.0](https://github.com/UI5/webcomponents/releases/tag/v2.14.0) of **@ui5/webcomponents**. * @default undefined */ accessibleDescriptionRef?: string | undefined; /** * Defines the aria-label attribute for the component. * * **Note:** Available since [v2.1.0](https://github.com/UI5/webcomponents/releases/tag/v2.1.0) of **@ui5/webcomponents**. * @default undefined */ accessibleName?: string | undefined; /** * Receives id (or many ids) of the elements that label the component. * * **Note:** Available since [v2.1.0](https://github.com/UI5/webcomponents/releases/tag/v2.1.0) of **@ui5/webcomponents**. * @default undefined */ accessibleNameRef?: string | undefined; /** * Defines the disabled state of the comonent. * @default false */ disabled?: boolean; /** * Determines the format, displayed in the input field. * * **Note:** Available since [v2.21.0](https://github.com/UI5/webcomponents/releases/tag/v2.21.0) of **@ui5/webcomponents**. * @default undefined */ displayFormat?: string | undefined; /** * Determines the format, displayed in the input field. * * Example: * HH:mm:ss -> 11:42:35 * hh:mm:ss a -> 2:23:15 PM * mm:ss -> 12:04 (only minutes and seconds) * @default undefined * @deprecated Use displayFormat and valueFormat instead */ formatPattern?: string | undefined; /** * 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. * * **Note:** Available since [v2.0.0](https://github.com/UI5/webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. * @default undefined */ name?: string | undefined; /** * Defines the open or closed state of the popover. * * **Note:** Available since [v2.0.0](https://github.com/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; /** * Defines the readonly state of the comonent. * @default false */ readonly?: boolean; /** * Defines whether the component is required. * * **Note:** Available since [v2.1.0](https://github.com/UI5/webcomponents/releases/tag/v2.1.0) of **@ui5/webcomponents**. * @default false */ required?: boolean; /** * Defines a formatted time value. */ value?: string; /** * Determines the format, used for the value attribute. * * **Note:** Available since [v2.21.0](https://github.com/UI5/webcomponents/releases/tag/v2.21.0) of **@ui5/webcomponents**. * @default undefined */ valueFormat?: string | undefined; /** * Defines the value state of the component. * @default "None" */ valueState?: ValueState | keyof typeof ValueState; } interface TimePickerDomRef extends Required<TimePickerAttributes>, Ui5DomRef { /** * Currently selected time represented as JavaScript Date instance */ readonly dateValue: Date | null; /** * Formats a Java Script date object into a string representing a locale date and time * according to the `formatPattern` property of the TimePicker instance * @param {Date} date - A Java Script date object to be formatted as string * @returns {string} - formatted value */ formatValue: (date: Date) => string; /** * Checks if a value is valid against the current `formatPattern` value. * * **Note:** an empty string is considered as valid value. * @param {string | undefined} value - The value to be tested against the current date format * @returns {boolean} */ isValid: (value: string | undefined) => boolean; /** * Checks if a value is valid against the current `valueFormat` value. * * **Note:** an empty string is considered as valid value. * * **Note:** Available since [v2.21.0](https://github.com/UI5/webcomponents/releases/tag/v2.21.0) of **@ui5/webcomponents**. * @param {string | undefined} value - The value to be tested against the value format * @returns {boolean} */ isValidValue: (value: string | undefined) => boolean; } interface TimePickerPropTypes extends TimePickerAttributes, Omit<CommonProps, keyof TimePickerAttributes | 'valueStateMessage' | 'onChange' | 'onClose' | 'onInput' | 'onOpen'> { /** * Defines the value state message that will be displayed as pop up under the `TimePicker`. * * **Note:** If not specified, a default text (in the respective language) will be displayed. * * **Note:** The `valueStateMessage` would be displayed, * when the `TimePicker` 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://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). * * __Supported Node Type/s:__ `Array<HTMLElement>` */ valueStateMessage?: UI5WCSlotsNode; /** * Fired when the input operation has finished by clicking the "OK" button or * when the text in the input field has changed and the focus leaves the input field. * * | cancelable | bubbles | * | :--------: | :-----: | * | ❌|✅| */ onChange?: (event: Ui5CustomEvent<TimePickerDomRef, TimePickerChangeEventDetail>) => void; /** * Fired after the value-help dialog of the component is closed. * * **Note:** Available since [v2.0.0](https://github.com/UI5/webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. * * | cancelable | bubbles | * | :--------: | :-----: | * | ❌|✅| */ onClose?: (event: Ui5CustomEvent<TimePickerDomRef>) => void; /** * Fired when the value of the `TimePicker` is changed at each key stroke. * * | cancelable | bubbles | * | :--------: | :-----: | * | ❌|✅| */ onInput?: (event: Ui5CustomEvent<TimePickerDomRef, TimePickerInputEventDetail>) => void; /** * Fired after the value-help dialog of the component is opened. * * **Note:** Available since [v2.0.0](https://github.com/UI5/webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. * * | cancelable | bubbles | * | :--------: | :-----: | * | ❌|✅| */ onOpen?: (event: Ui5CustomEvent<TimePickerDomRef>) => void; } /** * The `TimePicker` component provides an input field with assigned clocks which are opened on user action. * The `TimePicker` allows users to select a localized time using touch, mouse, or keyboard input. * It consists of two parts: the time input field and the clocks. * * ### Usage * The user can enter a time by: * * - Using the clocks that are displayed in a popup * - Typing it in directly in the input field * * When the user makes an entry and chooses the enter key, the clocks show the corresponding time (hours, minutes and seconds separately). * When the user directly triggers the clocks display, the actual time is displayed. * For the `TimePicker` * * ### Formatting * * If a time is entered by typing it into * the input field, it must fit to the used time format. * * Supported format options are pattern-based on Unicode LDML Date Format notation. * For more information, see [UTS #35: Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). * * For example, if the valueFormat is "HH:mm:ss", the displayFormat is "hh:mm: ss a", and the used locale is English, a valid value string is "11:42:35", which leads to an output of "11:42:35 AM". * If no placeholder is set to the TimePicker, the used displayFormat is displayed as a placeholder. If another placeholder is needed, it must be set. * * ### Keyboard handling * [F4], [Alt]+[Up], [Alt]+[Down] Open/Close picker dialog and move focus to it. * * When closed: * * - [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa. * - [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa. * - [Shift]+[Page Up] - Increments minutes by 1. * - [Shift]+[Page Down] - Decrements minutes by 1. * - [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1. * - [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1. * - * * When opened: * * - [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa. * - [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa. * - [Shift]+[Page Up] - Increments minutes by 1. * - [Shift]+[Page Down] - Decrements minutes by 1. * - [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1. * - [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1. * - [A] or [P] - Selects AM or PM respectively. * - [0]-[9] - Allows direct time selecting (hours/minutes/seconds). * - [:] - Allows switching between hours/minutes/seconds clocks. If the last clock is displayed and [:] is pressed, the first clock is beind displayed. * * * * __Note:__ This is a UI5 Web Component! [TimePicker UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/TimePicker) | [Repository](https://github.com/UI5/webcomponents) */ declare const TimePicker: import("react").ForwardRefExoticComponent<TimePickerPropTypes & import("@ui5/webcomponents-react-base").WithWebComponentPropTypes & import("react").RefAttributes<TimePickerDomRef>>; export { TimePicker }; export type { TimePickerDomRef, TimePickerPropTypes };