Stay date range pickerhospitality
Check-in and check-out picker with night counts, night-based availability, per-day content and a single committed stay value.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/stay-date-range-pickerDefault
stay-date-range-picker-demo.tsx
"use client";
import * as React from "react";import { useFormat } from "@/lib/locale";import { StayDateRangePicker, type StayValue } from "@/components/ui/stay-date-range-picker";
const soldOutNights = new Set(["2028-02-14", "2028-02-15"]);
export default function StayDateRangePickerDemo() { const format = useFormat(); const [stay, setStay] = React.useState<StayValue | null>(null); return ( <div className="flex flex-col gap-2"> <StayDateRangePicker aria-label="Stay dates" name="stay" today="2028-02-10" minNights={1} maxNights={14} isNightUnavailable={(date) => soldOutNights.has(date)} renderDayContent={(date) => (soldOutNights.has(date) ? "Sold out" : format.currency(120))} onValueChange={setStay} /> <p className="text-sm text-muted-foreground">{stay ? `${stay.checkIn} → ${stay.checkOut} (${stay.nights})` : "No stay selected"}</p> </div> );}