TimePicker

[luca-montaigut]

Hello,

For my project I needed a good dateTIME-picker but not being able to find one that suited me I fell back on DIYing a Timepicker based on the style of the Datepicker and the Select component.

I don't think I'll be able to do the PR that goes well to add it to the library but here is the code if it helps anyone.

import * as Select from '../select/base_select'
import { IconButton } from '../icon_button'
import { LuCheck, LuClock } from 'react-icons/lu'
import { css } from '#styled-system/css'
import { Stack } from '#styled-system/jsx'
import { useState } from 'react'

interface TimePickerProps {
  label: string
  value: string
  onSelectValue: (selected: string) => void
  stepInMinutes?: number
}

const getTimeRange = (stepInMinutes: number) =>
  Array.from({ length: 24 * (60 / stepInMinutes) }, (_, i) => {
    const hours = Math.floor(i / (60 / stepInMinutes))
    const minutes = (i % (60 / stepInMinutes)) * (60 / (60 / stepInMinutes))
    const time = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`
    return { label: time, value: time }
  })

export const TimePicker = ({
  label,
  stepInMinutes = 30,
  value,
  onSelectValue,
}: TimePickerProps) => {
  const [isOpen, setIsOpen] = useState(false)
  return (
    <Select.Root
      positioning={{ sameWidth: true }}
      items={getTimeRange(stepInMinutes)}
      open={isOpen}
      onInteractOutside={() => setIsOpen(false)}
      value={value ? [value] : []}
      onValueChange={(event) => {
        onSelectValue(event.value[0])
        setIsOpen(false)
      }}
    >
      <Select.Label>{label}</Select.Label>
      <Stack direction="row" gap={2}>
        <IconButton variant="outline" aria-label="open" onClick={() => setIsOpen((o) => !o)}>
          <LuClock />
        </IconButton>
        <Select.Control w="100%">
          <Select.Trigger onClick={() => setIsOpen(true)}>
            <Select.ValueText placeholder={'HH:mm'} />
          </Select.Trigger>
        </Select.Control>
        <Select.Positioner>
          <Select.Content
            className={css({
              maxHeight: '200px',
              overflowY: 'auto',
            })}
          >
            {getTimeRange(stepInMinutes).map((item, index) => (
              <Select.Item
                key={index}
                item={item}
                className={css({
                  padding: '8px 16px',
                })}
              >
                <Select.ItemText>{item.label}</Select.ItemText>
                <Select.ItemIndicator>
                  <LuCheck />
                </Select.ItemIndicator>
              </Select.Item>
            ))}
          </Select.Content>
        </Select.Positioner>
      </Stack>
    </Select.Root>
  )
}

Thanks for this great lib. Regards

[Horsty80]

Is it plan for ParkUi team to add this kind of component ?

thanks for the boilerplate :)