React TimePicker

The React TimePicker component is a user interface control that enables users to select or input time values in a structured and interactive way. It provides features like customizable time formats, keyboard navigation, and integration with forms or scheduling applications, making time selection simple and accurate.

Getting started

To create a new Vite project, refer to the Vite documentation. Once that Vite project is ready to run with default settings, let's add the React TimePicker component to the project.

Installing Syncfusion® React packages

To use the React TimePicker component in this project, the @syncfusion/react-calendars package needs to be installed using the following command:

npm install @syncfusion/react-calendars

Adding CSS reference

In this article, the Material theme is applied using CSS styles, which are available in installed packages. The necessary Material CSS styles for the TimePicker component and its dependents were imported into the src/App.css file.

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-calendars/styles/material.css';

Adding TimePicker component

To include the TimePicker component in your application, import the TimePicker from the @syncfusion/react-calendars package in App.tsx.

import { TimePicker } from "@syncfusion/react-calendars";

Add the TimePicker component in application as shown in below code example.

import { TimePicker } from '@syncfusion/react-calendars';

export default function App() {
    return (
       <div className="component-section">
         <TimePicker />
        </div>
    );
};

Run the project

To run the project, use the following command:

npm run dev

The TimePicker component provides a simple and intuitive way to select times. By default, it displays the current month and allows users to navigate between months and years.

Time Range

The TimePicker component supports minTime and maxTime properties to limit the selectable time within a specific range. These properties help restrict user input to valid time slots, making it ideal for scenarios like appointments or work schedules.

Step Interval

The TimePicker component supports the step property, which sets the gap between consecutive time options in the list. This makes time selection faster and more organized, helping users choose times in fixed intervals.

Format

The TimePicker component supports format property which provides flexible formatting options to display and accept time values in different styles. This feature ensures that the time representation matches your application’s requirements and user preferences.

Variants

The TimePicker component supports variant property which enhances user interaction through its three distinct visual variants: Standard, Outlined and Filled.

Controlled Vs Uncontrolled

The TimePicker component can be used in both controlled and uncontrolled modes. In controlled mode, the component's value is managed by the parent component, while in uncontrolled mode, the component manages its own state.

Appearance

Disabled

The TimePicker component supports disabled property, which can be set as true to prevent user interaction. This is useful when you want to temporarily disable the time selection functionality, such as during form validation or when certain conditions are not met. You can disable the TimePicker by setting the disabled property to true.

ReadOnly

The TimePicker component supports the readOnly property, which can be set to true to make the control non-editable while still displaying the selected time. This is useful when you want users to view the time without allowing any changes.

Float Label

The TimePicker component supports different label display modes through the labelMode property. This property controls how the label or placeholder text appears in relation to the input field.

Available label mode options:

• "Never": The label will never float in the input when the placeholder is available.
• "Always": The floating label will always float above the input.
• "Auto": The floating label will float above the input after focusing or entering a value in the input.

Validation

The TimePicker component supports valid, validMessage, and validityStyles properties to indicate and style invalid states. These properties make it easy to show error messages and highlight the input when the selected time does not meet the required conditions. In the example, the valid property is used to toggle the state and validMessage displays a helpful message when the time is outside the allowed range.

Dialog Mode

The TimePicker component supports dialog-style rendering through the pickerVariant property. Setting pickerVariant to Popup enables the TimePicker to open in a modal-like popup, simulating a dialog experience.

Customization

The TimePicker component offers customization options through the itemTemplate property, allowing you to define a custom template for each time item displayed in the popup list. This feature helps you personalize the appearance of time values, such as adding icons, highlighting specific times, or applying custom styles, to create a more engaging and tailored user experience.

Forms Support

The TimePicker component can be easily integrated into forms to capture time-based inputs along with other fields. In this example, it works with Syncfusion’s Form component to manage validation and state, allowing users to choose their event date and select start and end times. This approach ensures smooth form handling, validation, and submission while providing an intuitive way to include time selection in any form workflow.

Accessibility

The TimePicker component follows accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the TimePicker component is outlined below.

- All features of the component meet the requirement.

- Some features of the component do not meet the requirement.

- The component does not meet the requirement.

WAI-ARIA attributes

The TimePicker component follows the WAI-ARIA patterns to meet accessibility requirements. The following ARIA attributes are used in the TimePicker component:

Keyboard interaction

The TimePicker component follows keyboard interaction guidelines, making it accessible for people who use assistive technologies (AT) and those who rely on keyboard navigation. The following keyboard shortcuts are supported: