Date picker

"use client";import { parseDate } from "@internationalized/date";import { DatePicker } from "@/components/vip-ui/date-picker";export function DatePickerDemo() {  return (    <DatePicker      label="Appointment date"      defaultValue={parseDate("2026-06-15")}      className="w-full max-w-xs"    />  );}

"use client";import { isWeekend, parseDate } from "@internationalized/date";import { useLocale } from "react-aria-components";import { DatePicker } from "@/components/vip-ui/date-picker";export function DatePickerUnavailableDemo() {  const { locale } = useLocale();  const firstDay = parseDate("2026-06-15");  const lastDay = parseDate("2026-06-30");  const blockedStart = parseDate("2026-06-18");  const blockedEnd = parseDate("2026-06-19");  return (    <DatePicker      label="Appointment date"      description="Weekends and June 18–19 are unavailable. Book by June 30."      defaultValue={firstDay}      minValue={firstDay}      maxValue={lastDay}      isDateUnavailable={(date) =>        isWeekend(date, locale) ||        (date.compare(blockedStart) >= 0 && date.compare(blockedEnd) <= 0)      }      className="w-full max-w-xs"    />  );}

"use client";import { getLocalTimeZone, today } from "@internationalized/date";import { DatePicker } from "@/components/vip-ui/date-picker";export function DatePickerPresetsDemo() {  const now = today(getLocalTimeZone());  return (    <DatePicker      label="Due date"      presets={[        { label: "Today", value: now },        { label: "Tomorrow", value: now.add({ days: 1 }) },        { label: "In 1 week", value: now.add({ weeks: 1 }) },        { label: "In 1 month", value: now.add({ months: 1 }) },      ]}      className="w-full max-w-xs"    />  );}

"use client";import { parseDate } from "@internationalized/date";import { DatePicker } from "@/components/vip-ui/date-picker";export function DatePickerDisabledDemo() {  return (    <DatePicker      label="Contract start"      defaultValue={parseDate("2026-06-01")}      isDisabled      className="w-full max-w-xs"    />  );}

"use client";import {  type CalendarDate,  getLocalTimeZone,  parseDate,} from "@internationalized/date";import { useState } from "react";import { useLocale } from "react-aria-components";import { DatePicker } from "@/components/vip-ui/date-picker";export function DatePickerControlledDemo() {  const [date, setDate] = useState<CalendarDate | null>(    parseDate("2026-06-15"),  );  const { locale } = useLocale();  const formatter = new Intl.DateTimeFormat(locale, { dateStyle: "full" });  return (    <div className="grid w-full max-w-xs gap-4">      <DatePicker label="Delivery date" value={date} onChange={setDate} />      <output className="text-sm text-muted-foreground">        {date          ? `Selected: ${formatter.format(date.toDate(getLocalTimeZone()))}`          : "No date selected."}      </output>    </div>  );}

"use client";import { parseDate } from "@internationalized/date";import { DatePicker } from "@/components/vip-ui/date-picker";export function DatePickerSizesDemo() {  return (    <div className="grid w-full max-w-xs gap-3">      <DatePicker        size="xs"        aria-label="Appointment date"        defaultValue={parseDate("2026-06-15")}      />      <DatePicker        size="sm"        aria-label="Appointment date"        defaultValue={parseDate("2026-06-15")}      />      <DatePicker        size="md"        aria-label="Appointment date"        defaultValue={parseDate("2026-06-15")}      />      <DatePicker        aria-label="Appointment date"        defaultValue={parseDate("2026-06-15")}      />    </div>  );}