DatePicker

import { DatePicker } from "@raydenui/ui";

const [date, setDate] = useState<Date | null>(null);
 
<DatePicker value={date} onChange={setDate} />

<DatePicker
  value={date}
  onChange={setDate}
  showFooter
  onDone={() => closeModal()}
  onClear={() => setDate(null)}
/>

const [range, setRange] = useState<[Date | null, Date | null]>([null, null]);
 
<DatePicker
  mode="range"
  rangeValue={range}
  onRangeChange={setRange}
/>

const [date, setDate] = useState<Date | null>(new Date());
 
<DatePicker mode="year" value={date} onChange={setDate} />

const minDate = new Date(2024, 0, 1);  // Jan 1, 2024
const maxDate = new Date(2024, 11, 31); // Dec 31, 2024
 
<DatePicker
  value={date}
  onChange={setDate}
  minDate={minDate}
  maxDate={maxDate}
/>

const [checkIn, setCheckIn] = useState<Date | null>(null);
const [checkOut, setCheckOut] = useState<Date | null>(null);
 
<div className="space-y-4">
  <div>
    <label>Check-in Date</label>
    <DatePicker value={checkIn} onChange={setCheckIn} />
  </div>
  <div>
    <label>Check-out Date</label>
    <DatePicker
      value={checkOut}
      onChange={setCheckOut}
      minDate={checkIn ?? undefined}
    />
  </div>
</div>

const [range, setRange] = useState<[Date | null, Date | null]>([null, null]);
const [isOpen, setIsOpen] = useState(false);
 
<DatePicker
  mode="range"
  rangeValue={range}
  onRangeChange={setRange}
  showFooter
  onDone={() => setIsOpen(false)}
  onClear={() => setRange([null, null])}
/>