Calendar

1const [date, setDate] = useState<Date>();
2
3<Calendar
4  mode="single"
5  selected={date}
6  onSelect={setDate}
7  className="border border-border"
8/>

1const [range, setRange] = useState<DateRange>();
2
3<Calendar
4  mode="range"
5  selected={range}
6  onSelect={setRange}
7  numberOfMonths={2}
8  className="border border-border"
9/>

1const [dates, setDates] = useState<Date[]>();
2
3<Calendar
4  mode="multiple"
5  selected={dates}
6  onSelect={setDates}
7  className="border border-border"
8/>

1<Calendar
2  mode="single"
3  showOutsideDays={false}
4  className="border border-border"
5/>

1<Calendar
2  mode="single"
3  disabled={(date) =>
4    date < new Date() || date < new Date("1900-01-01")
5  }
6  className="border border-border"
7/>

1<Calendar
2  mode="single"
3  numberOfMonths={2}
4  className="border border-border"
5/>

1<Calendar
2  mode="single"
3  defaultMonth={new Date(2024, 0)}
4  className="border border-border"
5/>

1<Calendar
2  mode="single"
3  selected={date}
4  onSelect={setDate}
5  footer={
6    <p className="text-sm text-muted-foreground">
7      {date ? `Selected: ${date.toLocaleDateString()}` : "Pick a date"}
8    </p>
9  }
10/>