TimePicker

An accessible and customisable React TimePicker.

This is an opinionated, simplified fork of rc-time-picker with the following changes:

$3

- very minimal styling (see codesandbox for example of how we're using it in our app)
- uses styled components instead of less
- uses flexbox for columns instead of floating & fixed widths
- the panel now expands inline instead of popping above the content
- in collapsed state the element is now a div (instead of an input). AM/PM is separated so it can be styled independently:

!Collapsed

!Expanded

$3

- keyboard navigation
- press space/enter to open or select options
- press escape to close panel
- change time and navigate between lists with arrow keys
- focus trap
- focus stays within open time picker panel and doesn't get lost to background content
- when the panel is expanded the input is focused, and focus is returned when collapsed
- uses ul/li elements with radiogroup/radio roles - so when you select hour 3 screenreader will read "3, radio, 1 of 12, Select hour, radio group".
- This also allows for navigating between radio groups (from "Select hour" to "Select minute") in Group mode.
- aria-checked is used to indicate the currently selected element
- screen-reader friendly aria-labels with no leading zeros (so screenreader says "one" instead of "zero one"), and labels on radio groups (e.g. "Select AM or PM").
- aria-invalid is used to indicate incorrectly formatted time (when entering time manually)

$3

- allowStepInputOnly (defaults to true) - only allow entering times that match shown times (hourStep, minuteStep, secondStep) into the input.
- Set to false to allow entering e.g. "1:23 pm", even if minuteStep is set to 15.

Demo

!Demo

https://codesandbox.io/s/styled-time-picker-13h6y

Install

``bash
npm install @bonobolabs/time-picker
`

or

`bash
yarn add @bonobolabs/time-picker
`

Usage

`js
import TimePicker from '@bonobolabs/time-picker'
import ReactDOM from 'react-dom'
import styled from 'styled-components'

const StyledTimePicker = styled(TimePicker)
/ your CSS here /

const App = () => (
showSecond={false} // hide seconds
use12Hours={true} // show AM/PM
value={moment()} // show current time
onChange={date =>
// on change log the updated time to the console
console.log(date.format('LTS'))
}
// set a custom aria-label when collapsed
ariaLabelFunc={time => A ${time} reminder is set, editable}
/>
)

ReactDOM.render(, container)
``

See TimePicker.jsx and rc-time-picker docs for options.

License

MIT