search

kobaltedev / kobalte

A UI toolkit for building accessible web apps and design systems with SolidJS.
https://kobalte.dev
MIT License
1.3k stars 74 forks source link

[Component] TimeField #317

Open jer3m01 opened 10 months ago

jer3m01 commented 10 months ago

https://react-spectrum.adobe.com/react-aria/TimeField.html

dinezh256 commented 3 weeks ago

Hi @jer3m01

I was going through the Kobalte UI components and the reference you shared above for the TimeField component. Could you please advice on how we can implement this?

I noticed that we have a NumberField component. Should we consider using that as a base? Additionally, what attributes should we include for this component? Some that come to my mind are value, onChange, validate, and label.

Also, should we support both hh:mm:ss and hh:mm formats, and what about AM/PM versus 24-hour format options?

jer3m01 commented 3 weeks ago

This component should be similar to NumberField but based on TextField (so don't extend NumberField, copy a similar structure. We might make a more generic component later, but this shouldn't be done in this PR).

The format options should be available as props like https://react-spectrum.adobe.com/react-spectrum/TimeField.html#props.

Please use https://www.npmjs.com/package/@internationalized/date for performing any formatting (similar to how NumberField uses @internationalized/number.