TimePickerProps
Represents the props of the KendoReact TimePicker component.
Definition
Package:@progress/kendo-react-dateinputs
Properties
adaptive?
boolean
Providing different rendering of the popup element based on the screen dimensions.
false
adaptiveSubtitle?
string
Specifies the text that is rendered as subtitle in the adaptive popup(action sheet).
Applicable only when adaptive is set to true.
adaptiveTitle?
string
Specifies the text that is rendered as title in the adaptive popup(action sheet).
Applicable only when adaptive is set to true.
If not provided, the title will be the same as the label.
allowCaretMode?
boolean
Determines if the users should see a blinking caret inside the Date Input when possible.
false
ariaDescribedBy?
string
Identifies the element(s) which will describe the component, similar to HTML aria-describedby attribute. For example these elements could contain error or hint message.
ariaLabelledBy?
string
Identifies the element(s) which will label the component.
autoCorrectParts?
boolean
Determines whether to autocorrect invalid segments automatically.
true
autoSwitchKeys?
string[]
A string array representing custom keys, which will move the focus to the next date format segment.
[]
autoSwitchParts?
boolean
Determines whether to automatically move to the next segment after the user completes the current one.
true
cancelButton?
boolean
Determines whether to display the Cancel button in the popup.
className?
string
Sets the className of the TimePicker.
dateInput?
ComponentType<DateInputProps<any>>
Enables the customization or the override of the default DateInput which is rendered by the TimePicker (see example).
defaultShow?
boolean
Sets the default state of the popup upon render (see example).
defaultValue?
null | Date
Sets the default value of the TimePicker (see example).
disabled?
boolean
Determines whether the TimePicker is disabled (see example).
enableMouseWheel?
boolean
Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
true
fillMode?
"solid" | "flat" | "outline"
Configures the fillMode of the TimePicker.
The available options are:
- solid
- outline
- flat
undefined (theme-controlled)
format?
string | DateFormatOptions
Specifies the date format that is used to display the input value (see example).
Defines the descriptions of the format sections in the input field (see example).
id?
string
Specifies the id of the TimePicker.
inputAttributes?
InputHTMLAttributes<HTMLInputElement>
Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
label?
ReactNode
Renders a floating label for the TimePicker.
max?
Date
Specifies the greatest valid time (see example).
min?
Date
Specifies the smallest valid time (see example).
name?
string
Specifies the name property of the input DOM element.
nowButton?
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.
onBlur?
(event: FocusEvent<HTMLDivElement, Element>) => void
Fires each time any of the TimePicker elements gets blurred.
onChange?
(event: TimePickerChangeEvent) => void
Fires each time the user selects a new value (see example).
onClose?
(event: TimePickerCloseEvent) => void
Fires each time the popup is closed.
onFocus?
(event: FocusEvent<HTMLDivElement | HTMLSpanElement, Element>) => void
Fires each time the user focuses any of the TimePicker elements.
onOpen?
(event: TimePickerOpenEvent) => void
Fires each time the popup is opened.
placeholder?
null | string
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.
popup?
ComponentType<PopupProps>
Enables the customization or the override of the default Popup which is rendered by the TimePicker (see example).
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 tobody.popupClass: String—Specifies a list of CSS classes that are used to style the popup.
required?
boolean
Specifies if null is a valid value for the component.
This property is part of the FormComponentProps interface.
rounded?
"small" | "medium" | "large" | "full" | "none"
Configures the roundness of the TimePicker.
The available options are:
- small
- medium
- large
- full
- none
undefined (theme-controlled)
show?
boolean
Specifies if a time selector will be displayed (see example).
size?
"small" | "medium" | "large"
Configures the size of the TimePicker.
The available options are:
- small
- medium
- large
undefined (theme-controlled)
smoothScroll?
boolean
Toggles the smooth scroll animation on time click. By default, the animation is enabled.
Configures the incremental steps of the TimePicker (see example).
If the incremental step is greater than
1, the Now button will be hidden.
tabIndex?
number
Sets the tabIndex property of the TimePicker.
title?
string
Sets the title of the input element of the TimePicker.
valid?
boolean
Overrides the validity state of the component.
If valid is set, the required property will be ignored.
This property is part of the FormComponentProps interface.
validationMessage?
string
Controls the form error message of the component. If set to an empty string, no error will be thrown.
This property is part of the FormComponentProps interface.
validityStyles?
boolean
If set to false, no visual representation of the invalid state of the component will be applied.
This property is part of the FormComponentProps interface.
value?
null | Date
Specifies the value of the TimePicker (see example).
The
valuehas to be a valid JavaScriptDateinstance.
webMcp?
boolean | WebMcpProps
Enables Web MCP tool registration for this component.
Requires a parent WebMcpProvider from @progress/kendo-react-webmcp.
width?
string | number
Specifies the width of the TimePicker.