Skip to content

Commit

Permalink
Fix date time picker
Browse files Browse the repository at this point in the history
  • Loading branch information
@arjunkomath
arjunkomath committed Jan 16, 2025
1 parent db16847 commit 4509cb7
Showing 1 changed file with 131 additions and 125 deletions.
256 changes: 131 additions & 125 deletions components/project/events/date-time-picker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,102 +65,106 @@ function TimePicker(props: Props) {
};

return (
<Popover open={isOpen} onOpenChange={setIsOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
className={cn(
"w-full justify-start text-left font-normal",
!date && "text-muted-foreground",
)}
>
<CalendarIcon className="mr-2 h-4 w-4" />
{date ? (
format(date, "MM/dd/yyyy hh:mm aa")
) : (
<span>MM/DD/YYYY hh:mm aa</span>
)}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0">
<input
type="hidden"
name={props.name}
defaultValue={date?.toISOString()}
/>
<div className="sm:flex">
<Calendar
mode="single"
selected={date}
onSelect={handleDateSelect}
initialFocus
/>
<div className="flex flex-col sm:flex-row sm:h-[300px] divide-y sm:divide-y-0 sm:divide-x">
<ScrollArea className="w-64 sm:w-auto">
<div className="flex sm:flex-col p-2">
{hours.reverse().map((hour) => (
<Button
key={hour}
size="icon"
variant={
date && date.getHours() % 12 === hour % 12
? "default"
: "ghost"
}
className="sm:w-full shrink-0 aspect-square"
onClick={() => handleTimeChange("hour", hour.toString())}
>
{hour}
</Button>
))}
</div>
<ScrollBar orientation="horizontal" className="sm:hidden" />
</ScrollArea>
<ScrollArea className="w-64 sm:w-auto">
<div className="flex sm:flex-col p-2">
{Array.from({ length: 12 }, (_, i) => i * 5).map((minute) => (
<Button
key={minute}
size="icon"
variant={
date && date.getMinutes() === minute ? "default" : "ghost"
}
className="sm:w-full shrink-0 aspect-square"
onClick={() =>
handleTimeChange("minute", minute.toString())
}
>
{minute}
</Button>
))}
</div>
<ScrollBar orientation="horizontal" className="sm:hidden" />
</ScrollArea>
<ScrollArea className="">
<div className="flex sm:flex-col p-2">
{["AM", "PM"].map((ampm) => (
<Button
key={ampm}
size="icon"
variant={
date &&
((ampm === "AM" && date.getHours() < 12) ||
(ampm === "PM" && date.getHours() >= 12))
? "default"
: "ghost"
}
className="sm:w-full shrink-0 aspect-square"
onClick={() => handleTimeChange("ampm", ampm)}
>
{ampm}
</Button>
))}
</div>
</ScrollArea>
<>
<input
type="hidden"
name={props.name}
defaultValue={date?.toISOString()}
/>
<Popover open={isOpen} onOpenChange={setIsOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
className={cn(
"w-full justify-start text-left font-normal",
!date && "text-muted-foreground",
)}
>
<CalendarIcon className="mr-2 h-4 w-4" />
{date ? (
format(date, "MM/dd/yyyy hh:mm aa")
) : (
<span>MM/DD/YYYY hh:mm aa</span>
)}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0">
<div className="sm:flex">
<Calendar
mode="single"
selected={date}
onSelect={handleDateSelect}
initialFocus
/>
<div className="flex flex-col sm:flex-row sm:h-[300px] divide-y sm:divide-y-0 sm:divide-x">
<ScrollArea className="w-64 sm:w-auto">
<div className="flex sm:flex-col p-2">
{hours.reverse().map((hour) => (
<Button
key={hour}
size="icon"
variant={
date && date.getHours() % 12 === hour % 12
? "default"
: "ghost"
}
className="sm:w-full shrink-0 aspect-square"
onClick={() => handleTimeChange("hour", hour.toString())}
>
{hour}
</Button>
))}
</div>
<ScrollBar orientation="horizontal" className="sm:hidden" />
</ScrollArea>
<ScrollArea className="w-64 sm:w-auto">
<div className="flex sm:flex-col p-2">
{Array.from({ length: 12 }, (_, i) => i * 5).map((minute) => (
<Button
key={minute}
size="icon"
variant={
date && date.getMinutes() === minute
? "default"
: "ghost"
}
className="sm:w-full shrink-0 aspect-square"
onClick={() =>
handleTimeChange("minute", minute.toString())
}
>
{minute}
</Button>
))}
</div>
<ScrollBar orientation="horizontal" className="sm:hidden" />
</ScrollArea>
<ScrollArea className="">
<div className="flex sm:flex-col p-2">
{["AM", "PM"].map((ampm) => (
<Button
key={ampm}
size="icon"
variant={
date &&
((ampm === "AM" && date.getHours() < 12) ||
(ampm === "PM" && date.getHours() >= 12))
? "default"
: "ghost"
}
className="sm:w-full shrink-0 aspect-square"
onClick={() => handleTimeChange("ampm", ampm)}
>
{ampm}
</Button>
))}
</div>
</ScrollArea>
</div>
</div>
</div>
</PopoverContent>
</Popover>
</PopoverContent>
</Popover>
</>
);
}

Expand All @@ -170,35 +174,37 @@ function DatePicker(props: Props) {
);

return (
<Popover>
<PopoverTrigger asChild>
<Button
variant={"outline"}
className={cn(
"w-full justify-start text-left font-normal",
!date && "text-muted-foreground",
)}
>
<CalendarIcon className="mr-2 h-4 w-4" />
{date ? format(date, "PPP") : <span>Pick a date</span>}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<input
type="hidden"
name={props.name}
defaultValue={date?.toISOString()}
/>
<Calendar
mode="single"
selected={date}
onSelect={(date) => {
setDate(date);
if (date) props.onSelect?.(date);
}}
initialFocus
/>
</PopoverContent>
</Popover>
<>
<input
type="hidden"
name={props.name}
defaultValue={date?.toISOString()}
/>
<Popover>
<PopoverTrigger asChild>
<Button
variant={"outline"}
className={cn(
"w-full justify-start text-left font-normal",
!date && "text-muted-foreground",
)}
>
<CalendarIcon className="mr-2 h-4 w-4" />
{date ? format(date, "PPP") : <span>Pick a date</span>}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<Calendar
mode="single"
selected={date}
onSelect={(date) => {
setDate(date);
if (date) props.onSelect?.(date);
}}
initialFocus
/>
</PopoverContent>
</Popover>
</>
);
}

0 comments on commit 4509cb7

Please sign in to comment.