TimePicker

An accessible dropdown menu for the common dropdown menu button design pattern. `TimePicker` uses roving `tabIndex` for focus management.

    View Source@fluidtruck/core

Import#

import { TimePicker } from '@fluidtruck/core'

Usage & Controlled Values#

The default value ranges from 1-24 from the current hour and utlizes the UseControllableStateProps

  • The value is to be used for controlled mode: value?: number
  • The initial value is to be used in uncontrolled mode: defaultValue?: T | (() => T)
  • The callback fired when the value changes: onChange?: (value: T) => void
  • The component name (for warnings): name?: string
  • ref is non-optional
function TimePickerPropsUsage() {
  const [stateOne, setStateOne] = React.useState('14')
  const apiString = '2021-10-12T02:42:09.998Z'
  const [stateTwo, setStateTwo] = React.useState(
    moment().hour(apiString).format('HH'),
  )
  const [stateThree, setStateThree] = React.useState(14)


  const formatHour = (hour) => moment(hour, 'kk').format('H:00')
  const updateState = (hour) => setStateOne(formatHour(hour))


  return (
    <Grid gap={6} templateColumns="repeat(3, .5fr)">
      <Grid templateRows="repeat(2, 1fr)">
        <TimePicker
          value={stateOne}
          onChange={(hour) => updateState(hour)}
        />
        <chakra.p pt={4}>
          <b>State:</b> {stateOne}
        </chakra.p>
      </Grid>
      <Grid templateRows="repeat(2, 1fr)">
        <TimePicker
          value={stateTwo}
          onChange={(hour) => setStateTwo(hour)}
        />
        <chakra.p pt={4}>
          <b>State:</b> {stateTwo}
        </chakra.p>
      </Grid>
      <Grid templateRows="repeat(2, 1fr)">
        <TimePicker
          value={stateThree}
          onChange={(hour) => setStateThree(hour)}
        />
        <chakra.p pt={4}>
          <b>State:</b> {stateThree}
        </chakra.p>
      </Grid>
    </Grid>
  )
}


render(<TimePickerPropsUsage />)

Formatting#

function TimePickerUsage() {
  const [state, setState] = React.useState()
  const [otherState, setOtherState] = React.useState()
  const refOne = React.useRef(null)
  const refTwo = React.useRef(null)


  const formatHour = (hour) => moment(hour, 'kk').format('H:00')
  const updateState = (hour) => setState(formatHour(hour))
  const updateOtherState = (hour) => setOtherState(formatHour(hour))
  return (
    <Box maxWidth="50%">
      <Stack direction="row">
        <TimePicker
          ref={refOne}
          value={state}
          onChange={(hour) => updateState(hour)}
        />


        <Divider orientation="vertical" />


        <TimePicker
          value={otherState}
          ref={refTwo}
          onChange={(hour) => updateOtherState(hour)}
        />
      </Stack>
      <Stack direction="row">
        <chakra.p py={4}>
          <b>State:</b> {state}
        </chakra.p>
        <Divider orientation="vertical" />
        <chakra.p py={4}>
          <b>OtherState:</b> {otherState}
        </chakra.p>
      </Stack>
    </Box>
  )
}


render(<TimePickerUsage />)

Availability & errors#

To disable unavailable hours, pass the unavailable?: Array<Number>; prop. Default is an empty array. Must be in 1-24, number format, unavailable={[5]}.

  • If no defaultValue is set, and the current hour is included in the unavailable hours, it will default to first item in available hours. Otherwise, it will set to current hour.

Accepts isInvalid to add error styles.

function TimePickerDisabledUsage() {
  const [state, setDisabledState] = React.useState(
    moment('2021-02-08 19:30:26.123').format('H'),
  )
  const ref = React.useRef(null)
  const refTwo = React.useRef(null)


  return (
    <Grid>
      <GridItem>
        <TimePicker
          unavailable={[17, 19]}
          ref={ref}
          value={state}
          onChange={(hour) => setDisabledState(hour)}
        />
        <chakra.p py={4}>
          <b>State:</b> {state}
        </chakra.p>
      </GridItem>


      <TimePicker isInvalid value={0} ref={refTwo} />
    </Grid>
  )
}


render(<TimePickerDisabledUsage />)