Calendar lets the user pick a date or date range from a month grid. Use it in booking flows, scheduling UIs, date filters, or anywhere the user needs to see surrounding dates for context.
ts
| Guidance | Practices |
|---|---|
| Do | Set min and max dates to limit selection to a valid window, like only future dates for a booking or the current quarter for a report. |
| Do | Use range mode when the user needs to pick a start and end date, like a trip or a time-off request. |
| Do | Use dateConstraints to disable specific dates like weekends or holidays, and explain why they are unavailable. |
| Do | Show two months side by side when the user frequently selects dates that span a month boundary. |
| Don't | Use a calendar for dates far in the past or future like a birth date. A text input is faster for open-ended entry. |
| Don't | Disable large blocks of dates without context. The user should understand why dates are unavailable. |
Limit which dates can be selected using min/max bounds and custom rules like weekdays only. Use for scheduling UIs where certain dates are unavailable.
Pick a start and end date with the range highlighted between them. Use for booking dates, time-off requests, or report filters.
Pick one date from a month grid. Use for appointment dates, due dates, or any field that needs a single date.
Two months side by side for selecting ranges that span a month boundary. Use in booking or travel UIs where check-in and check-out often fall in different months.