Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | 72x 179x 179x 9x 9x 9x | "use client";
import * as React from "react";
import { format } from "date-fns";
import { Calendar as CalendarIcon } from "lucide-react";
import { DatePickerProps } from "shared-types";
import { cn } from "@/utils";
import { Button, Calendar, Popover, PopoverContent, PopoverTrigger } from "@/components";
export const DatePicker = ({ date, onChange, dataTestId }: DatePickerProps) => {
const [isCalendarOpen, setIsCalendarOpen] = React.useState<boolean>(false);
const [selected, setSelected] = React.useState<Date>();
return (
<Popover open={isCalendarOpen} onOpenChange={setIsCalendarOpen}>
<PopoverTrigger asChild>
<Button
variant={"outline"}
className={cn(
"w-[280px] justify-start text-left font-normal",
!date && "text-muted-foreground",
)}
data-testid={`${dataTestId}-datepicker`}
>
<CalendarIcon className="mr-2 h-4 w-4" />
{date ? format(date, "MM/dd/yyyy") : <span>Pick a date</span>}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0">
<Calendar
mode="single"
selected={selected}
defaultMonth={selected}
onSelect={(date) => {
setSelected(date);
onChange(date);
setIsCalendarOpen(false);
}}
initialFocus
/>
</PopoverContent>
</Popover>
);
};
|