Month Picker

v1.0.0·Added in 1.0.0

Pick a month or a range of months from a year grid, with quarters and presets, for reports, billing periods and card expiry dates.

Click the field to open a panel under it with the year at the top and its twelve months in four rows of three; the current month carries a small dot. The arrows beside the year move one year (the grid slides that way), and the year itself opens a grid of twelve years for long jumps (its arrows move twelve years). In single mode a click on a month sets it, the fill glides to it and the panel closes. In range mode the first click sets the first month, moving the pointer previews the band, and the second click sets the last month (a month before the first swaps them); months past maxMonths or beyond a disabled month cannot be picked while the band is open. The range commits on the second click and the panel stays open until Escape, Enter or a click outside, with a summary like "Jul - Sep 2026 · 3 months" under the grid. Quarter chips (Q1 to Q4, T1 to T4 in French or Spanish) pick three months at once, or the quarter's first month in single mode, and presets (This month, Last 3 months, This year...) sit in a column on the left, clamped to min and max. The clear button empties the field. Keyboard: Enter, Space or ArrowDown on the field open the panel with focus on the selected (else the current) month; arrows move one month, Up / Down three, Home / End the row's ends, PageUp / PageDown a year, Enter or Space pick, and Enter on the last month of a range closes the panel. Escape first leaves the years grid, then drops a half-picked range, then closes and returns focus to the field. On a phone the field opens a bottom sheet with the title, the presets as a row of chips, 48px month cells and the quarters; single mode commits on tap and closes, range mode keeps a draft in the sheet until Apply, and Cancel or dragging the sheet away keeps the old value. name submits YYYY-MM, or name.from and name.to as ISO dates.