React Time Picker Component
Time Picker
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.
React Time Picker is a customizable and user-friendly tool for selecting times in forms. It supports various locales, sizes, and states to enhance the user experience.
Other Frameworks
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.
Example#
To create a basic React Time Picker, use:
Sizing#
Set heights using size property like size="lg" and size="sm".
Disabled#
Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.
Readonly#
Add the inputReadOnly boolean attribute to prevent modification of the input's value.
Custom formats#
Disable minutes and seconds#
Customize React Time Picker to display only hours, or hours and minutes by disabling minutes/seconds.
Custom hours, minutes and seconds#
Tailor the React Time Picker to your needs by specifying custom values for hours, minutes, and seconds. Use arrays to define selectable options or functions for dynamic filtering. The example below demonstrates setting specific hour options, minute intervals, and a condition for seconds only to include values less than 20.
In this configuration, the React TimePicker restricts hours to a predefined set, minutes to quarter intervals, and seconds to values under 20, offering a high degree of customization for precise time selection scenarios.
Locale#
Tailor the React Time Picker to match different locales, offering an inclusive user experience across diverse languages. Automatically adapt or set specific locales to meet your application's needs.
Auto#
Our Time Picker compoennt automatically detects and adapts to the user's locale, ensuring a localized experience without explicit configuration.
Chinese#
Specify the locale to Chinese (zh-CN) for users in China, enhancing usability with a familiar format and language.
Japanese#
Set the Time Picker's locale to Japanese (ja) to cater to Japanese users, presenting date and time in a localized format.
Korean#
Configure the locale to Korean (ko) for a tailored experience in Korea, offering date and time selection in the local language.
This approach ensures that our React TimePicker component is versatile and adaptable, providing a seamless and intuitive interface for users worldwide.
Right to left support#
RTL support is built-in and can be explicitly controlled through the $enable-rtl variables in scss.
Hebrew#
Optimize the Time Picker for Hebrew-speaking users with RTL layout. Set the locale to Hebrew (he-IL) and apply RTL direction to align with Hebrew script.
Persian#
Adapt the Time Picker for Persian-speaking audiences by enabling RTL layout. Customize the locale to Persian (fa-IR) and utilize RTL directionality for seamless integration.
API#
Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.