Time Picker Input

A customizable React time input component that enforces 12-hour or 24-hour format, bypassing OS and browser settings for consistent time input across all platforms.

Features

• 🎯 Format Enforcement: Enforce 12-hour or 24-hour format regardless of OS/browser settings
• 🎨 Customizable: Built with Tailwind CSS and fully customizable styling
• ♿ Accessible: Built on Radix UI primitives for full accessibility support
• ⌨️ Keyboard Friendly: Full keyboard navigation support
• 📱 Mobile Friendly: Touch-friendly time picker with scrollable lists
• 🎭 TypeScript: Full TypeScript support with exported types

Installation

npm install time-picker-input

Peer Dependencies

This package requires the following peer dependencies:

npm install react react-dom tailwindcss

Usage

Basic Example

import { useState } from "react";
import { TimeInput } from "time-picker-input";

function App() {
  const [time, setTime] = useState("");

  return (
    <TimeInput
      value={time}
      onChange={setTime}
      format={24} // or 12 for 12-hour format
    />
  );
}

12-Hour Format

import { TimeInput } from "time-picker-input";

<TimeInput
  value={time}
  onChange={setTime}
  format={12}
/>

With Form Integration

import { TimeInput, TimeInputProps } from "time-picker-input";

function MyForm() {
  const [time, setTime] = useState("14:30");

  return (
    <form>
      <label>
        Select Time:
        <TimeInput
          value={time}
          onChange={(value) => setTime(value)}
          onBlur={() => console.log("Time input blurred")}
          format={24}
          className="w-full"
        />
      </label>
    </form>
  );
}

With Error Styling

<TimeInput
  value={time}
  onChange={setTime}
  className="border-red-500 focus-within:ring-red-500"
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | required | Time value in HH:mm format (24-hour format internally) | | onChange | (value: string) => void | required | Callback fired when time changes | | onBlur | () => void | undefined | Callback fired when input loses focus | | disabled | boolean | false | Disables the input | | className | string | undefined | Additional CSS classes | | format | 12 \| 24 | 24 | Time format to display (12-hour or 24-hour) |

Value Format

The component always stores and returns time values in 24-hour format (HH:mm), regardless of the display format:

• "00:00" - Midnight (12:00 AM in 12-hour format)
• "12:00" - Noon (12:00 PM in 12-hour format)
• "14:30" - 2:30 PM (2:30 PM in 12-hour format)
• "23:59" - 11:59 PM

Styling

The component uses Tailwind CSS and follows shadcn/ui design patterns. You can customize the appearance by:

1. Passing className prop: Add custom classes to override default styles
2. CSS Variables: The component uses CSS variables for theming. Ensure your Tailwind config includes the necessary color variables:

:root {
  --background: 0 0% 100%;
  --foreground: 220 39% 11%;
  --primary: 218 91% 59%;
  --primary-foreground: 0 0% 98%;
  --muted: 220 14% 96%;
  --muted-foreground: 220 8.9% 46.1%;
  --accent: 220 14% 96%;
  --accent-foreground: 220 39% 11%;
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 218 91% 59%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 39% 11%;
}

Keyboard Navigation

• Tab: Navigate between hours and minutes inputs
• Arrow Right / Colon (:) : Move from hours to minutes
• Arrow Left: Move from minutes to hours
• Enter: Move to minutes when hours input is complete
• Numbers: Direct input of time values

Browser Support

Works in all modern browsers that support:

• React 18+
• CSS Grid and Flexbox
• ES6+ JavaScript

License

MIT

Contributing

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