React ios style time picker

iOS Style time picker for your next React app.

Demo

Check out the live demo here: Live Demo

install

npm i react-ios-style-time-picker

Usage

12 hours format

import { useState } from 'react';
import { TimePicker } from 'react-ios-style-time-picker';
import 'react-ios-style-time-picker/style.css';

function App() {
  const [time, setTime] = useState<{ hour: number; minute: number }>({
    hour: new Date().getHours(),
    minute: new Date().getMinutes(),
  });

  const handleTimeChange = (hour: number, minute: number) => {
    setTime({ hour, minute });
  };

  return (
    <div>
      <TimePicker onChange={handleTimeChange} hourFormat='12' />
    </div>
  );
}

24 hours format

import { useState } from 'react';
import { TimePicker } from 'react-ios-style-time-picker';
import 'react-ios-style-time-picker/style.css';

function App() {
  const [time, setTime] = useState<{ hour: number; minute: number }>({
    hour: new Date().getHours(),
    minute: new Date().getMinutes(),
  });

  const handleTimeChange = (hour: number, minute: number) => {
    setTime({ hour, minute });
  };

  return (
    <div>
      <TimePicker onChange={handleTimeChange} hourFormat='24' />
    </div>
  );
}

Props

| Prop | Type | Required | Default | Description | | :----------- | :--------------------------------------- | :------- | :----------- | :----------------------------------------------------------------- | | onChange | (hour: number, minute: number) => void | ✅ | - | Callback invoked when the selected time changes | | initTime | Date | ❌ | new Date() | Sets the initial time | | infinite | boolean | ❌ | false | Enables infinite scroll style | | className | string | ❌ | undefined | Custom class name for styling | | hourFormat | '12' | '24' | ❌ | '12' | Time format (12-hour/24-hour) | | locale | 'en' | 'ko' | 'ja' | 'zh' | ❌ | 'en' | Language for displaying AM/PM (English, Korean, Japanese, Chinese) |

Time Format (hourFormat)

• 12: Displays AM/PM notation
• 24: Displays 0-23 hour format

Get involved!

We appreciate your feedback and contributions. If you have feature requests, questions, or want to contribute code or config files, please don't hesitate to use the GitHub Issue tracker.

We welcome all individual contributors, regardless of their level of experience or skill set. Your contributions are valuable, and we are excited to see what you can accomplish in this collaborative and supportive environment.

Reference

Inspired by ios-style-picker

It's forked from this gist

License

The MIT License.