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

bash

npm install time-picker-input





$3



This package requires the following peer dependencies:

bash

npm install react react-dom tailwindcss





Usage



$3

tsx

import { useState } from "react";

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



function App() {

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



  return (

          value={time}

      onChange={setTime}

      format={24} // or 12 for 12-hour format

    />

  );

}

$3

tsx

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



  value={time}

  onChange={setTime}

  format={12}

/>

$3

tsx

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



function MyForm() {

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



  return (

    

      

        Select Time:

                  value={time}

          onChange={(value) => setTime(value)}

          onBlur={() => console.log("Time input blurred")}

          format={24}

          className="w-full"

        />

      

    

  );

}

$3

tsx

  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:

css

: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.