react-samay

React Samay

Time picker for React.js

This is a fork from rc-time-picker, which is no longer maintained. I have also mixed styling support from time-picker-io.

Features

• Uses native date object
• Dropdown based hours, minutes, seconds & meridiem selection.
• Keyboard navigation
• Similar API as rc-time-picker
• Written with Typescript, with built-in typings

Install

npm i --save react-samay

Usage

import { TimePicker } from 'react-samay';
import { createRoot } from 'react-dom/client';

// import css file
import 'react-samay/index.css';

const container = document.getElementById('app');
const root = createRoot(container);

root.render(
  <TimePicker
    value={new Date()}
    onChange={(date) => {
      console.log(date);
    }}
  />
);

Storybook Examples

You can find storybook examples here.

API

TimePicker

Name	Type	Default
prefixCls	String	'react-samay'
disabled	Boolean	false
open	Boolean	false
defaultValue	Date	null
defaultOpenValue	Date	new Date()
value	Date	null
placeholder	String	''
className	String	''
inputClassName	String	''
name	String	-
id	String	''
showHour	Boolean	true
showMinute	Boolean	true
showSecond	Boolean	true
format	String	-
disabledHours	Function	-
disabledMinutes	Function	-
disabledSeconds	Function	-
use12Hours	Boolean	false
hideDisabledOptions	Boolean	false
onChange	Function	null
onAmPmChange	Function	null
onOpen	Function({ open })
onClose	Function({ open })
hourStep	Number	1
minuteStep	Number	1
secondStep	Number	1

Changelog

4.0.0

• refactor: use react-hooks
• breaking: support only react>=18