chakra-ui-time-picker
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

Chakra UI Time Picker

npm Node.js CI

Time picker for React.js

This is a fork from react-samay, I have also mixed styling support from chakra ui.

Features

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

Storybook Demo link

Install

npm i --save chakra-ui-time-picker

Usage

import { TimePicker } from 'chakra-ui-time-picker';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <TimePicker
    defaultValue={new Date()}
    onChange={(date) => {
      console.log(date);
    }}
  />,
  <div id="app" />
);

API

TimePicker

Name Type Default
prefixCls String 'react-samay'
disabled Boolean false
isValid 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

Package Sidebar

Install

npm i chakra-ui-time-picker

Weekly Downloads

0

Version

1.0.1

License

MIT

Unpacked Size

106 kB

Total Files

11

Last publish

Collaborators

  • dg98