87 lines
2.6 KiB
TypeScript
87 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { ChevronDownIcon } from 'lucide-react';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import { Calendar } from '@/components/ui/calendar';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from '@/components/ui/popover';
|
|
|
|
export default function TimePicker({
|
|
dateLabel = 'Date',
|
|
timeLabel = 'Time',
|
|
date,
|
|
setDate,
|
|
time,
|
|
setTime,
|
|
...props
|
|
}: {
|
|
dateLabel?: string;
|
|
timeLabel?: string;
|
|
date?: Date;
|
|
setDate?: (date: Date | undefined) => void;
|
|
time?: string;
|
|
setTime?: (time: string) => void;
|
|
} & React.HTMLAttributes<HTMLDivElement>) {
|
|
const [open, setOpen] = React.useState(false);
|
|
|
|
return (
|
|
<div className='flex gap-4' {...props}>
|
|
<div className='flex flex-col gap-3'>
|
|
<Label htmlFor='date' className='px-1'>
|
|
{dateLabel}
|
|
</Label>
|
|
<Popover open={open} onOpenChange={setOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button variant='calendar' id='date'>
|
|
{date ? date.toLocaleDateString() : 'Select date'}
|
|
<ChevronDownIcon />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className='w-auto overflow-hidden p-0' align='start'>
|
|
<Calendar
|
|
mode='single'
|
|
selected={date}
|
|
captionLayout='dropdown'
|
|
onSelect={(d) => {
|
|
setDate?.(d);
|
|
setOpen(false);
|
|
}}
|
|
modifiers={{
|
|
today: new Date(),
|
|
}}
|
|
modifiersClassNames={{
|
|
today: 'bg-secondary text-secondary-foreground rounded-full',
|
|
}}
|
|
classNames={{
|
|
day: 'text-center hover:bg-gray-500 hover:rounded-md',
|
|
}}
|
|
weekStartsOn={1} // Set Monday as the first day of the week
|
|
startMonth={new Date(new Date().getFullYear() - 10, 0)}
|
|
endMonth={new Date(new Date().getFullYear() + 14, 12)}
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
<div className='flex flex-col gap-3'>
|
|
<Label htmlFor='time' className='px-1'>
|
|
{timeLabel}
|
|
</Label>
|
|
<Input
|
|
type='time'
|
|
id='time'
|
|
step='60'
|
|
value={time}
|
|
onChange={(e) => setTime?.(e.target.value)}
|
|
className='bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none'
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|