DatePicker

import { DatePicker } from 'tuimorphic';

<DatePicker />

<DatePicker label="Select Date" />

<DatePicker
  label="Birthday"
  defaultValue={new Date(1990, 0, 15)}
/>

const today = new Date();
const nextMonth = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
 
<DatePicker label="Future dates only" minDate={today} />
<DatePicker label="Past dates only" maxDate={today} />
<DatePicker label="Next 30 days" minDate={today} maxDate={nextMonth} />

const [date, setDate] = useState<Date | undefined>(undefined);
 
<DatePicker
  label="Appointment Date"
  value={date}
  onValueChange={setDate}
/>

const [startDate, setStartDate] = useState<Date | undefined>(undefined);
const [endDate, setEndDate] = useState<Date | undefined>(undefined);
 
<DatePicker
  label="Start Date"
  value={startDate}
  onValueChange={setStartDate}
/>
<DatePicker
  label="End Date"
  value={endDate}
  onValueChange={setEndDate}
  minDate={startDate}
/>

const [checkIn, setCheckIn] = useState<Date | undefined>(undefined);
const [checkOut, setCheckOut] = useState<Date | undefined>(undefined);
 
const today = new Date();
const maxDate = new Date(today.getFullYear() + 1, today.getMonth(), today.getDate());
 
<DatePicker
  label="Check-in"
  value={checkIn}
  onValueChange={setCheckIn}
  minDate={today}
  maxDate={maxDate}
/>
<DatePicker
  label="Check-out"
  value={checkOut}
  onValueChange={setCheckOut}
  minDate={checkIn || today}
  maxDate={maxDate}
/>