react-accessible-time-picker v1.0.1

React Time Picker

A simple, accessible, and customizable time picker component for React applications.

Features

• 12-hour and 24-hour format support
• Keyboard navigation
• Accessible design with ARIA attributes
• Customizable styling with CSS variables
• Light and dark theme support
• Controlled and uncontrolled component modes

Installation

npm install react-time-picker
# or
yarn add react-time-picker
# or
pnpm add react-time-picker

Usage

Basic Usage

import { TimePicker } from 'react-time-picker';
import 'react-time-picker/dist/style.css'; // Import default styles

function App() {
  return <TimePicker label="Select Time" />;
}

With 12-hour Format (AM/PM)

import { TimePicker } from 'react-time-picker';

function App() {
  return <TimePicker label="Select Time" is24Hour={false} />;
}

Controlled Component

import { useState } from 'react';
import { TimePicker } from 'react-time-picker';

function App() {
  const [time, setTime] = useState({ hour: '09', minute: '30', period: 'AM' });

  return (
    <TimePicker 
      label="Meeting Time" 
      value={time} 
      onChange={setTime} 
      is24Hour={false} 
    />
  );
}

Props

Types

type TimePickerValue = {
  hour: string;
  minute: string;
  period?: "AM" | "PM";
};

type TimePickerClasses = Partial<{
  container: string;
  label: string;
  timePicker: string;
  timeInputs: string;
  timeInput: string;
  separator: string;
  pipe: string;
  periodSelect: string;
  selectContent: string;
  selectItem: string;
  selectIndicator: string;
  selectScrollButton: string;
  popoverContent: string;
  popoverColumns: string;
  popoverColumn: string;
  popoverColumnTitle: string;
  popoverItem: string;
  popoverActiveItem: string;
  timeTrigger: string;
}>;

Styling

Using CSS Variables

The component uses CSS variables for styling. You can override these variables in your CSS:

:root {
  /* Light theme variables */
  --time-text
  --time-bg
  --time-border
  --time-focus-border
  --time-separator
  --time-disabled-text
  --time-hover
  --time-focus
  --time-icon
  --time-popover-bg
  --time-popover-shadow
  --time-active
  --time-disabled-bg
  --time-scrollbar-hover-bg
  --time-scrollbar-thumb
  --time-scrollbar-thumb-hover
  --time-scrollbar-bg
  --scrollbar-size
}

/* Dark theme */
[data-theme="dark"] {
  --time-text
  --time-bg
  --time-border
  --time-focus-border
  --time-separator
  --time-disabled-text
  --time-hover
  --time-focus
  --time-icon
  --time-popover-bg
  --time-popover-shadow
  --time-active
  --time-disabled-bg
  --time-scrollbar-hover-bg
  --time-scrollbar-thumb
  --time-scrollbar-thumb-hover
  --time-scrollbar-bg
}

See the style.css file for default values of these variables.

Using the classes prop

For more specific styling, use the classes prop to target individual elements:

import styles from './custom-styles.module.css';

<TimePicker 
  classes={{
    container: styles.myContainer,
    timePicker: styles.myTimePicker,
    timeInput: styles.myInput,
    // ...other elements
  }}
/>

Keyboard Navigation

• Tab: Navigate between inputs and buttons
• ArrowUp/ArrowDown: Increment/decrement hours or minutes
• ArrowUp/ArrowDown in popover: Navigate through hour or minute options

Browser Support

This component works in all modern browsers (Chrome, Firefox, Safari, Edge).

Accessibility

The time picker is designed with accessibility in mind, including:

• ARIA attributes for screen readers
• Keyboard navigation
• Focus management
• High contrast support

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.