Date Picker

1import { CalendarIcon } from "lucide-solid";
2import type { Component } from "solid-js";
3import { createSignal, splitProps } from "solid-js";
4import { cn } from "~/lib/utils";
5import { Button } from "./button";
6import { Calendar } from "./calendar";
7import { Popover, PopoverContent, PopoverTrigger } from "./popover";
8 
9export type DatePickerProps = {
10  class?: string;
11  selected?: Date;
12  onSelect?: (date: Date) => void;
13  placeholder?: string;
14  disabled?: boolean;
15  format?: (date: Date) => string;
16};
17 
18const defaultFormat = (date: Date) =>
19  date.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" });
20 
21export const DatePicker: Component<DatePickerProps> = (props) => {
22  const [local] = splitProps(props, [
23    "class",
24    "selected",
25    "onSelect",
26    "placeholder",
27    "disabled",
28    "format",
29  ]);
30 
31  const [open, setOpen] = createSignal(false);
32  const fmt = () => local.format ?? defaultFormat;
33 
34  return (
35    <Popover open={open()} onOpenChange={setOpen}>
36      <PopoverTrigger
37        as={Button}
38        variant="outline"
39        class={cn(
40          "w-[280px] justify-start text-left font-normal",
41          !local.selected && "text-muted-foreground",
42          local.class,
43        )}
44        disabled={local.disabled}
45      >
46        <CalendarIcon class="mr-2 h-4 w-4" />
47        {local.selected ? fmt()(local.selected) : (local.placeholder ?? "Pick a date")}
48      </PopoverTrigger>
49      <PopoverContent showClose={false} class="w-auto p-0">
50        <Calendar
51          {...(local.selected !== undefined ? { selected: local.selected } : {})}
52          onSelect={(date) => {
53            local.onSelect?.(date);
54            setOpen(false);
55          }}
56        />
57      </PopoverContent>
58    </Popover>
59  );
60};