Date range picker

"use client";import { parseDate } from "@internationalized/date";import { DateRangePicker } from "@/components/vip-ui/date-range-picker";export function DateRangePickerDemo() {  return (    <DateRangePicker      label="Trip dates"      defaultValue={{        start: parseDate("2026-06-18"),        end: parseDate("2026-06-24"),      }}      className="w-full max-w-sm"    />  );}

"use client";import { parseDate } from "@internationalized/date";import { DateRangePicker } from "@/components/vip-ui/date-range-picker";export function DateRangePickerLimitsDemo() {  return (    <DateRangePicker      label="Trip dates"      description="Choose dates in June. June 18–19 are unavailable."      minValue={parseDate("2026-06-01")}      maxValue={parseDate("2026-06-30")}      isDateUnavailable={(date) =>        date.compare(parseDate("2026-06-18")) >= 0 &&        date.compare(parseDate("2026-06-19")) <= 0      }      defaultValue={{        start: parseDate("2026-06-15"),        end: parseDate("2026-06-17"),      }}      className="w-full max-w-sm"    />  );}

"use client";import {  endOfMonth,  getLocalTimeZone,  startOfMonth,  today,} from "@internationalized/date";import { DateRangePicker } from "@/components/vip-ui/date-range-picker";export function DateRangePickerPresetsDemo() {  const now = today(getLocalTimeZone());  const lastMonth = now.subtract({ months: 1 });  return (    <DateRangePicker      label="Report period"      presets={[        {          label: "Last 7 days",          value: { start: now.subtract({ days: 6 }), end: now },        },        {          label: "Last 30 days",          value: { start: now.subtract({ days: 29 }), end: now },        },        {          label: "This month",          value: { start: startOfMonth(now), end: endOfMonth(now) },        },        {          label: "Last month",          value: { start: startOfMonth(lastMonth), end: endOfMonth(lastMonth) },        },      ]}      className="w-full max-w-sm"    />  );}

"use client";import { parseDate } from "@internationalized/date";import { DateRangePicker } from "@/components/vip-ui/date-range-picker";export function DateRangePickerDisabledDemo() {  return (    <DateRangePicker      label="Billing period"      defaultValue={{        start: parseDate("2026-06-01"),        end: parseDate("2026-06-30"),      }}      isDisabled      className="w-full max-w-sm"    />  );}

"use client";import { parseDate } from "@internationalized/date";import { DateRangePicker } from "@/components/vip-ui/date-range-picker";const tripDates = {  start: parseDate("2026-06-18"),  end: parseDate("2026-06-24"),};export function DateRangePickerSizesDemo() {  return (    <div className="grid w-full max-w-sm gap-3">      <DateRangePicker        size="xs"        aria-label="Trip dates"        defaultValue={tripDates}      />      <DateRangePicker        size="sm"        aria-label="Trip dates"        defaultValue={tripDates}      />      <DateRangePicker        size="md"        aria-label="Trip dates"        defaultValue={tripDates}      />      <DateRangePicker aria-label="Trip dates" defaultValue={tripDates} />    </div>  );}