[blocks]: Time Picker and Time Range Picker

[HenriqueBarucco]

Description

Description
A simple time picker (just as date picker, but only for time) and also a time range picker.

love the work 👍🏻

Example
Mobiscroll Time Range Component

Example

https://demo.mobiscroll.com/react/range/#

[birobirobiro]

Time picker: https://time.openstatus.dev/

Date range picker: https://date-range-picker-for-shadcn-demo.vercel.app/

[Jbmanllr]

Real time picker here: https://github.com/fatihcaliss/shadcn-time-range-picker, above is a time input.

[jt6677]

nice! would love to see a time range (from and to) with validation.

[jt6677]

import { isAfter } from 'date-fns'

const [fromDate, setFromDate] = useState<Date | undefined>(new Date())
const [toDate, setToDate] = useState<Date | undefined>(new Date())
const [isValid, setIsValid] = useState(false)

useEffect(() => {
if (fromDate && toDate) {
setIsValid(isAfter(toDate, fromDate))
}
}, [fromDate, toDate]) is quite easy with date-fn. could probably wired it up with

to make it show the red error in label.

[fatihcaliss]

Hello, I created this package, you can look over.
GitHub: https://github.com/fatihcaliss/shadcn-time-range-picker
npm: https://www.npmjs.com/package/shadcn-time-range-picker

[Jbmanllr]

Thanks as a "time picker" it's a better option than the time input above!