Time Picker

allows users to select a specific time, usually in hours and minutes, from a set of options.

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Example

Storybook failed to load. Please connect to the VPN to access.

                                                        
                                                        
                                                            import { useState } from 'react';
                                                        import { TimePicker, TimeService } from '@optimus-web/core';
                                                        
                                                        const MyTimePickerComponent = () => {
                                                            const [value, setValue] = useState('');
                                                        
                                                            return (
                                                                <TimePicker
                                                                    name="time-picker"
                                                                    getTimeService={() => TimeService}
                                                                    onChange={setValue}
                                                                    value={value}
                                                                />
                                                            );
                                                        }
                                                        
                                                            

API

Name

Type

Default

Description

disabled?

boolean

 

An optional boolean that, if true, disables the time picker component

label?

ReactNode

 

This optional property represents the label of the field. It can be any valid React node

required?

boolean

 

This optional boolean property indicates whether the field is required or not

size?

SizeType

 

An optional SizeType (not defined in the provided code) that could be used to control the size of the time picker component

helper?

ReactNode

 

This optional property represents a helper element for the field. It can be any valid React node

className?

string

 

This optional property is a string that specifies the class name

forText?

string

 

This optional property is a string that can be used for additional text related to the field

forwardedRef?

Ref<HTMLElement>

 

This optional property is a ref that can be forwarded to the field. It is a Ref for an HTMLElement

htmlFor?

string

 

This optional property is a string that specifies which form element a label is bound to

onBlur?

(event?: FocusEvent<HTMLInputElement>) => void

 

An optional function that handles the blur event

onChange?

(value: string) => void

 

The callback function that is called when the value of the time picker changes

onFocus?

(event?: FocusEvent<HTMLInputElement>) => void

 

An optional function that handles the focus event

name

string

 

The name of the time picker

captionIconWithTooltip?

ReactNode

 

This optional property represents a caption icon with a tooltip. It can be any valid React node

captionIconHandler?

MouseEventHandler<HTMLButtonElement>

 

This optional property is a function that handles mouse events on a caption icon in the field. It receives a MouseEventHandler for an HTMLButtonElement

value?

number

 

The current value of the time picker

error?

ReactNode

 

This optional property represents an error message for the field. It can be any valid React node

placeholder?

ReactNode

 

An optional node that displays a placeholder when the time picker component is empty

showSeconds?

boolean

 

Determines whether to show seconds in the time picker field

onTimeChange?

(time: T) => void

 

A callback function that is called when the time value changes

time?

 

 

This is an optional property that represents the time

showAsDialog?

boolean

 

Determines whether to show the TimePickerField as a dialog

shouldNormalizeMeridiem?

boolean

 

Determines whether to normalize the meridiem (AM/PM) value

readOnly?

boolean

 

This optional boolean property indicates whether the field is read-only or not

getTimeService

() => TimeService

 

A function that returns the time service

alignRight?

boolean

 

If true, aligns the text input to the right

clearable?

boolean

 

If true, the time picker field can be cleared by the user

getValue?

(value: string) => void

 

A function that gets the current value of the time picker field

id?

string

 

The ID of the time picker field

indicativeIcon?

IconName

 

The name of an icon to display in the time input field

inline?

boolean

 

An optional boolean that, if true, makes the time picker component inline

interactiveIcon?

() => void

 

The name of an interactive icon to display in the time picker field

leadingImage?

ReactNode

 

A React node to display as a leading image in the time picker field

loading?

boolean

 

An optional boolean that, if true, makes the time picker component have a loading state

maxCharacterCount?

number

 

The maximum number of characters that can be entered in the time picker field

onClear?

() => void

 

An optional function that handles the clear event

prefix?

ReactNode

 

A React node to display as a prefix in the input field