TimePicker

An accessible and customisable React TimePicker.

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

Styling

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

Accessibility improvements

• 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)

New fields

• 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

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

Install

npm install @bonobolabs/time-picker

or

yarn add @bonobolabs/time-picker

Usage

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 = () => (
  <StyledTimePicker
    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(<App />, container)

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

License

MIT