TimePicker
Introduction
TimePicker represents a highly customizable component that allows users to enter and pick time in various formats. In particular, it provides a text input field and a selection element where users can select the desired time. You can customise this component to work with a specific time format, change its appearance, etc.
This component is a part of @react-form-builder/components-rsuite. The following introduces and describes available properties and options for the TimePicker component.
TimePicker component data is stored in HH:mm:ss
format.
Main properties
The following general properties are available within the Main tab:
Name | Type | Description |
---|---|---|
Label | string | Provide a title for your component |
Placeholder | string | Placeholder string |
Value | string | Provide value for the input field |
Default value | boolean | Sets default time value for the input field |
Format | string | Format of the time when rendered in the input (e.g., HH:mm:ss ) |
Editable | boolean | If set to true, the time can be entered via the keyboard |
Cleanable | boolean | If set to true, allows users to change specified time |
Disabled | boolean | Disables the component |
Read Only | boolean | If set to true, makes your checkbox unavailable to interact with |
Open | boolean | Whether the time selection window is open |
Placement | choice | Select the placement of component (e.g., bottom end, top start, etc.) |
Size | choice | Select the size of the input field (e.g., large, small, etc.) |
At the bottom of the Main properties menu, you can find additional options:
- Render When: Provides conditional rendering for your calendar as described in the corresponding chapter.
- HTML attributes: Allows you to provide custom HTML attributes for your form.
Style properties
These are properties that allow to customize the size, color and other style properties of your component:
- For Device: You can provide component's style customization for all devices or specific devices by using this dropdown list. Refer to Adaptive Layout for more details.
- Component > Class Name: Add a class name for your component for the subsequent styling if necessary.
-
Wrapper: The options below enable you to tailor the appearance of your component and customize it for a specific device type, as selected in the For Device property:
Name Type Description Width number
Specifies the width for your component Height number
Specifies the height for your component Margin top/right/bottom/left number
Margin values for you component Color string
Allows customizing the text color Background color string
Enables customizing the background color