MonthPicker

The MonthPicker widget is a standalone component for selecting months or month ranges. It’s commonly used in reporting scenarios where users need to select reporting periods such as fiscal years, quarters, or custom month ranges. It’s also used internally by MonthField.

export default () => (
  <MonthPicker value={bind(m.month, "2024-06-01")} style="height: 25em" />
)

interface Model {
  month: string;
}

const m = createModel<Model>();

import { createModel } from "cx/data";
import { bind } from "cx/ui";
import { MonthPicker } from "cx/widgets";

Range Selection

In range mode, the picker provides quick selection options:

• Click on a year to select the entire year (Jan - Dec)
• Click on a quarter (Q1, Q2, Q3, Q4) to select all three months in that quarter
• Drag across months to select a custom range

<MonthPicker
  range
  from={bind(m.from, "2024-03-01")}
  to={bind(m.to, "2024-06-01")}
  style="height: 25em"
/>

interface Model {
  from: string;
  to: string;
}

const m = createModel<Model>();

import { createModel } from "cx/data";
import { bind } from "cx/ui";
import { MonthPicker } from "cx/widgets";

Keyboard Navigation

The MonthPicker is fully keyboard accessible:

Configuration

Core Properties

Date Constraints

Appearance

Validation

Callbacks