/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { DateInputFormatPlaceholder } from '../../dateinput/models/format-placeholder'; import { TimePickerIncrementalSteps } from './IncrementalSteps'; import { DateInputsPopupSettings } from '../../PopupSettings'; import { PopupProps } from '@progress/kendo-react-popup'; import { DateInputProps } from '../../index.js'; import { DateFormatOptions } from '@progress/kendo-react-intl'; import * as React from 'react'; /** * @hidden */ export interface TimePickerSettings { /** * Sets the `className` of the TimePicker. */ className?: string; /** * Determines whether to display the **Cancel** button in the popup. */ cancelButton?: boolean; /** * Determines whether to display the **Now** button in the popup. * * > If the current time is out of range or the incremental step is greater than `1`, the **Now** button will be hidden. */ nowButton?: boolean; /** * Sets the default state of the popup upon render ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/default-value#toc-setting-the-default-popup-state)). */ defaultShow?: boolean; /** * Determines whether the TimePicker is disabled ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/disabled-state)). */ disabled?: boolean; /** * Specifies the date format that is used to display the input value ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/formats)). */ format?: string | DateFormatOptions; /** * Defines the descriptions of the format sections in the input field ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/placeholders)). */ formatPlaceholder?: DateInputFormatPlaceholder; /** * Specifies the `id` of the TimePicker. */ id?: string; /** * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute). * For example these elements could contain error or hint message. * * @remarks * This property is related to accessibility. */ ariaDescribedBy?: string; /** * Identifies the element(s) which will label the component. * * @remarks * This property is related to accessibility. */ ariaLabelledBy?: string; /** * The accessible label of the component. * * @remarks * This property is related to accessibility. */ ariaLabel?: string; /** * Specifies the greatest valid time ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/time-ranges)). */ max?: Date; /** * Specifies the smallest valid time ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/time-ranges)). */ min?: Date; /** * Specifies the `name` property of the `input` DOM element. */ name?: string; /** * Fires each time any of the TimePicker elements gets blurred. */ onBlur?: (event: React.FocusEvent) => void; /** * Fires each time the user focuses any of the TimePicker elements. */ onFocus?: (event: React.FocusEvent) => void; /** * Configures the popup options of the TimePicker. * * The available options are: * - `animate: Boolean`—Controls the popup animation. By default, the open and close animations are enabled. * - `appendTo:`— Defines the container to which the Popup will be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body). * - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup. */ popupSettings?: DateInputsPopupSettings; /** * Specifies if a time selector will be displayed ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/controlled-state#toc-controlling-the-popup-state)). */ show?: boolean; /** * Configures the incremental steps of the TimePicker ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/incremental-steps)). * * > If the incremental step is greater than `1`, the **Now** button will be hidden. */ steps?: TimePickerIncrementalSteps; /** * Toggles the smooth scroll animation on time click. By default, the animation is enabled. */ smoothScroll?: boolean; /** * Sets the `tabIndex` property of the TimePicker. * * @remarks * This property is related to accessibility. */ tabIndex?: number; /** * Sets the title of the `input` element of the TimePicker. */ title?: string; /** * Specifies the width of the TimePicker. */ width?: number | string; /** * Enables the customization or the override of the default Popup which is rendered by the TimePicker * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/custom-rendering#toc-customizing-the-popup)). */ popup?: React.ComponentType; /** * Enables the customization or the override of the default DateInput which is rendered by the TimePicker * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/custom-rendering#toc-customizing-the-dateinput)). */ dateInput?: React.ComponentType; /** * Renders a floating label for the TimePicker. */ label?: React.ReactNode; /** * Specifies the hint the DateInput displays when its value is `null` or there is no partial selection. * For more information, refer to the article on * [placeholders](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/placeholders). */ placeholder?: string | null; }