Date Picker

When to Use

• Selecting a single date (birthdays, deadlines, event dates)
• Selecting a date range (booking periods, report filters)
• When you need to constrain selectable dates (min/max boundaries)

Anatomy

The Date Picker consists of:

1. Header — Month/year display with navigation arrows
2. Weekday row — Day-of-week labels
3. Date grid — Selectable date cells with various states
4. Action bar — Cancel and OK buttons (optional)

Best Practices

• Use single mode for one-off date selection, range mode for start/end pairs
• Always provide minDate/maxDate when the valid range is known
• Pre-populate with a sensible default month (e.g. current month or the month of an existing value)