On this page
Overview
Show code, ReportMonth.tsx
Anatomy
Field
Control
Label
Value
Clear
Calendar icon
Description
Show code, MonthPickerAnatomy.tsx
Popup
Previous year
Year
Next year
Month
Actions
Show code, MonthPickerPopupAnatomy.tsx
Behaviour
Choosing a month
The month shows in the reader's language, and choosing one closes the popup.
Within a fiscal year
Months outside the range a field allows are unavailable, and the year buttons stop at them.
Show code, FiscalYear.tsx
A short format
The field can write the month in a shorter form, such as 07/28.
Show code, ShortFormat.tsx
Rules
A month picker is for a month where the day doesn't matter, one month to a field.
Use it when
- A month of a year, such as the month a report covers
Ranges
Use two fields for a range of months, such as From and To.
Accessibility
| Key | Action |
|---|---|
| Enter, Space, ↓, ↑ on the field | Opens the popup at the chosen value. |
| Arrow keys | Move between months. |
| Page Up, Page Down | Moves a year. |
| Enter, Space on a month | Chooses the month. |
| Esc | Closes the popup and returns focus to the field. |
| Backspace, Delete on the field | Clears a clearable field. |