Shadcn Calendar

"use client"import * as React from "react"import { Calendar } from "~/components/ui/calendar"export default function CalendarDemo() {  const [date, setDate] = React.useState<Date | undefined>(new Date())  return (    <div className="w-full p-6 flex justify-center">      <Calendar        captionLayout="dropdown"        className="rounded-md border shadow-sm"        mode="single"        onSelect={setDate}        selected={date}      />    </div>  )}

"use client"import * as React from "react"import { Calendar } from "~/components/ui/calendar"export default function CalendarRange() {  const [date, setDate] = React.useState<Date | undefined>(new Date(2025, 5, 12))  return (    <div className="w-full p-6 flex justify-center">      <Calendar        className="rounded-lg border shadow-sm"        defaultMonth={date}        mode="single"        numberOfMonths={2}        onSelect={setDate}        selected={date}      />    </div>  )}

"use client"import { ChevronDownIcon } from "lucide-react"import * as React from "react"import { Button } from "~/components/ui/button"import { Calendar } from "~/components/ui/calendar"import { Label } from "~/components/ui/label"import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover"export default function CalendarDatePicker() {  const [open, setOpen] = React.useState(false)  const [date, setDate] = React.useState<Date | undefined>(undefined)  return (    <div className="w-full p-6 flex justify-center">      <div className="flex flex-col gap-3">        <Label className="px-1" htmlFor="date">          Date of birth        </Label>        <Popover onOpenChange={setOpen} open={open}>          <PopoverTrigger asChild>            <Button className="w-48 justify-between font-normal" id="date" variant="outline">              {date ? date.toLocaleDateString() : "Select date"}              <ChevronDownIcon />            </Button>          </PopoverTrigger>          <PopoverContent align="start" className="w-auto overflow-hidden p-0">            <Calendar              captionLayout="dropdown"              mode="single"              onSelect={date => {                setDate(date)                setOpen(false)              }}              selected={date}            />          </PopoverContent>        </Popover>      </div>    </div>  )}

"use client"import { zodResolver } from "@hookform/resolvers/zod"import { format } from "date-fns"import { CalendarIcon } from "lucide-react"import { useForm } from "react-hook-form"import { toast } from "sonner"import { z } from "zod"import { Button } from "~/components/ui/button"import { Calendar } from "~/components/ui/calendar"import {  Form,  FormControl,  FormDescription,  FormField,  FormItem,  FormLabel,  FormMessage,} from "~/components/ui/form"import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover"import { cn } from "~/lib/utils"const FormSchema = z.object({  dob: z.date({    required_error: "A date of birth is required.",  }),})export default function CalendarForm() {  const form = useForm<z.infer<typeof FormSchema>>({    resolver: zodResolver(FormSchema),  })  function onSubmit(data: z.infer<typeof FormSchema>) {    toast("You submitted the following values", {      description: (        <pre className="mt-2 w-[320px] rounded-md bg-neutral-950 p-4">          <code className="text-white">{JSON.stringify(data, null, 2)}</code>        </pre>      ),    })  }  return (    <div className="w-full p-6 flex justify-center">      <Form {...(form as any)}>        <form className="space-y-8" onSubmit={form.handleSubmit(onSubmit)}>          <FormField            control={form.control as any}            name="dob"            render={({ field }) => (              <FormItem className="flex flex-col">                <FormLabel>Date of birth</FormLabel>                <Popover>                  <PopoverTrigger asChild>                    <FormControl>                      <Button                        className={cn(                          "w-[240px] pl-3 text-left font-normal",                          !field.value && "text-muted-foreground",                        )}                        variant={"outline"}                      >                        {field.value ? format(field.value, "PPP") : <span>Pick a date</span>}                        <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />                      </Button>                    </FormControl>                  </PopoverTrigger>                  <PopoverContent align="start" className="w-auto p-0">                    <Calendar                      captionLayout="dropdown"                      disabled={date => date > new Date() || date < new Date("1900-01-01")}                      mode="single"                      onSelect={field.onChange}                      selected={field.value}                    />                  </PopoverContent>                </Popover>                <FormDescription>Your date of birth is used to calculate your age.</FormDescription>                <FormMessage />              </FormItem>            )}          />          <Button type="submit">Submit</Button>        </form>      </Form>    </div>  )}

"use client"import * as React from "react"import { Calendar } from "~/components/ui/calendar"import { Label } from "~/components/ui/label"import {  Select,  SelectContent,  SelectItem,  SelectTrigger,  SelectValue,} from "~/components/ui/select"export default function CalendarMonthYearSelector() {  const [dropdown, setDropdown] =    React.useState<React.ComponentProps<typeof Calendar>["captionLayout"]>("dropdown")  const [date, setDate] = React.useState<Date | undefined>(new Date(2025, 5, 12))  return (    <div className="w-full p-6 flex justify-center">      <div className="flex flex-col gap-4">        <Calendar          captionLayout={dropdown}          className="rounded-lg border shadow-sm"          defaultMonth={date}          mode="single"          onSelect={setDate}          selected={date}        />        <div className="flex flex-col gap-3">          <Label className="px-1" htmlFor="dropdown">            Dropdown          </Label>          <Select            onValueChange={value =>              setDropdown(value as React.ComponentProps<typeof Calendar>["captionLayout"])            }            value={dropdown}          >            <SelectTrigger className="bg-background w-full" id="dropdown" size="sm">              <SelectValue placeholder="Dropdown" />            </SelectTrigger>            <SelectContent align="center">              <SelectItem value="dropdown">Month and Year</SelectItem>              <SelectItem value="dropdown-months">Month Only</SelectItem>              <SelectItem value="dropdown-years">Year Only</SelectItem>            </SelectContent>          </Select>        </div>      </div>    </div>  )}