Date-picker

1"use client";
2 
3import * as React from "react";
4import dayjs from "dayjs";
5import { Button } from "@/registry/default/button/button";
6import { Calendar } from "@/registry/default/calendar/calendar";
7import {
8  Popover,
9  PopoverContent,
10  PopoverTrigger,
11} from "@/registry/default/popover/popover";
12import { cn } from "@/lib/utils";
13 
14import { HugeiconsIcon } from "@hugeicons/react";
15import { Calendar01Icon, UnfoldMoreIcon } from "@hugeicons/core-free-icons";
16export interface DatePickerProps {
17  value?: Date;
18  onSelect?: (date: Date | undefined) => void;
19  placeholder?: string;
20  className?: string;
21  disabled?: boolean;
22  format?: string;
23}
24 
25export function DatePicker({
26  value,
27  onSelect,
28  placeholder = "Select a date",
29  className,
30  disabled = false,
31  format = "DD MMMM YYYY",
32}: DatePickerProps) {
33  const [open, setOpen] = React.useState(false);
34 
35  return (
36    <Popover open={open} onOpenChange={setOpen}>
37      <PopoverTrigger
38        render={(props) => (
39          <Button
40            {...props}
41            variant="outline"
42            className={cn("w-[280px] justify-between", className)}
43            disabled={disabled}
44          >
45            <span className="flex w-full items-center">
46              <HugeiconsIcon icon={Calendar01Icon} className="mr-2 size-4"  strokeWidth={2} />
47              {value ? (
48                <span>{dayjs(value).format(format)}</span>
49              ) : (
50                <span className="text-muted-foreground">{placeholder}</span>
51              )}
52            </span>
53            <HugeiconsIcon icon={UnfoldMoreIcon} className="ml-2 size-4 shrink-0 opacity-50"  strokeWidth={2} />
54          </Button>
55        )}
56      />
57      <PopoverContent
58        className="w-auto border-none p-0 outline-none"
59        sideOffset={8}
60        arrow={false}
61      >
62        <Calendar
63          className="border-0"
64          mode="single"
65          showOutsideDays
66          selected={value}
67          onSelect={onSelect}
68        />
69      </PopoverContent>
70    </Popover>
71  );
72}