Calendar (Date Picker)

Usage Guidelines:

• Do Use for selecting specific dates (e.g., "Deal Closing Date") or scheduling future events.

• Do Use the dropdown variant for quick year/month jumping when the date is far in the past or future (e.g., "Fund Vintage 2018").

• Do Not Use for known text inputs like "duration" (e.g., "30 days"); use a Number Input instead.

Variants & Semantics:

A. The Header (Navigation)

• Month/Year Selector: Two distinct dropdown buttons allow rapid navigation.

  • Behavior: Clicking "Dec" opens a month list. Clicking "2025" opens a year scroll.

• Pagination: Left (<) and Right (>) chevron buttons navigate sequentially by month.

B. The Grid (Day View)

• Structure: A 7-column grid starting (typically) on Sunday or Monday depending on locale settings.

• Day Labels: Shortened labels (Su, Mo, Tu) appear above the grid to identify columns.

States & Interaction

• Default: Dates are displayed in Text-Neutral-Primary.

• Hover: A subtle circle or rounded square background appears behind the date to indicate clickability.

• Selected: A solid Brand-Primary fill with Text-Inverse (White) indicates the chosen date.

• Current Day: Often marked with a small dot or a distinct border color to orient the user.

• Disabled: Dates outside the valid range (e.g., historical dates for a future scheduler) are muted and non-interactive.

Variants

A. Single Date Picker

• Usage: Setting a deadline or milestone.

• Interaction: Clicking a date immediately selects it and closes the popover.

B. Month/Year Picker

• Usage: Selecting a reporting period (e.g., "Q3 2025") without needing a specific day.

• Visual: The grid is replaced by a list of months (Jan–Dec) or years.