date-picker-svelte
date-picker-svelte copied to clipboard
probablykasper
Ability to pick time
Would be cool to expand the date picker by adding the ability to pick a time, with an optional 24h or 12h time format. Currently, it is possible to pick a time only by typing the time information within the input. What would be cool to have is the ability to show the calendar together with a list of times.
Could look similar to a native datetime-local input.
As far as the implementation goes here is an idea:
We can create a TimePicker.svelte component, that could be put within the DateInput.svelte since that looks like something that can be used as a wrapper that shares functions between the TimePicker and DatePicker. The same wrapper is already passing a $store variable to the DatePicker so we would pass it the same way to the TimePicker.
The DatePicker and TimePicker do not conflict with each other. But the changes from within the input fields have to be reflected in the TimePicker, which should be straightforward if we listen to the $store value
As far as the UI and logic goes: We can always show 2 columns for time picking. One column would allow us to pick hours, the other would allow us to pick minutes.
Only when 12h time format is selected we would additionally show PM / AM column.
Would be nice to a property we pass to DateInput to force a certain format. 24Hours(default:false?)
Would be nice to disable/enable time picking. timePicker (default:true)
I'm not sure about the column thing, it seems a bit slow to use.
I'd say 24-hour should be default as about 70% of the world seems to use it, and ISO8601. Might be possible to get a user preference through a JS API though
Any ideas for an alternative? One thing that comes to mind is creating a clock:
But it is too big.
Another thing would be to create text inputs but we already have that... Maybe we don't even need this feature lol
Hey, was looking for such date component with time input. Anyone working on that feature ?
