Month picker

Examples

Check out the Usage section for details about how to design a month picker properly, and the different configuration options we provide.

Pick a month

You can allow the user to pick a month using the MonthPicker component and then use the handler to get the selected month. Users will select a combined month and year.

import { MonthPicker } from '@jutro/components/new';

export function MonthSelector() {
  function handleMonthChange(event, value) {
    console.log('The user selected the following month:', value);
    // displays: { year: 2023, month: 1 }
  }

  return (
    <MonthPicker
      label={{
        id: 'month-picker-label',
        defaultMessage: 'Enter month',
      }}
      onChange={handleMonthChange}
    />
  );
}

Controlled month picker

You can control the month picker by passing the value prop. This is useful if you want to use the month picker as a controlled component.

import { MonthPicker } from '@jutro/components/new';

function MonthPickerControlled() {
  const [picked, setMonth] = React.useState({ year: 2023, month: 1 });

  function handleMonthChange(event, value) {
    setMonth(value);
  }

  return (
    <MonthPicker
      label={{
        id: 'month-picker-label',
        defaultMessage: 'Enter month',
      }}
      onChange={handleMonthChange}
      value={picked}
    />
  );
}

Note that the value prop is an object with properties called year and month.

tip

If you want to format the month picker value, you can get started with the following example:

const dateObjectFromInput = new Date(picked.year, picked.month, 1, 0, 0);
const formattedTime = Intl.DateTimeFormat('en-US').format(dateObjectFromInput);

It is best to use the Intl.DateTimeFormat API to format the month picker value because every time toLocaleString is called, it has to perform a search in a big database of localization strings, which is potentially inefficient. Creating an Intl.DateTimeFormat object and using its format() method can avoid this problem because a DateTimeFormat object remembers the arguments passed to it and may decide to cache a slice of the database.

For more information, see the MDN documentation about DateTimeFormat.

Specify interval

You can specify the "min" and "max" date range to limit the amount of valid options, for example "January 2024" and "December 2024" would limit it to any month in 2024.

<MonthPicker
  label="Pick a month"
  minMonth={{
    year: 2024,
    month: 1,
  }}
  maxMonth={{
    year: 2024,
    month: 12,
  }}
/>

Key	Used for
jutro-components.fields.MonthPicker.chooseMonth	The label text for the input field.

Key	Used for
jutro-components.DateCalendar.previousMonth	The label text for the previous month button.
jutro-components.DateCalendar.nextMonth	The label text for the next month button.
jutro-components.MonthSkeleton.previousYear	The label text to go to the previous year button.
jutro-components.MonthSkeleton.nextYear	The label text to go to the next year button.
jutro-components.MonthSkeleton.currentMonth	The label text to go to the current month button.
jutro-components.MonthSkeleton.currentMonthAriaLabel	The label text for the button to select the current month as the value.
jutro-components.YearCalendar.previousYears	The label text to for the previous year range button.
jutro-components.YearCalendar.currentYear	The label text to for the go to current year button.
jutro-components.YearCalendar.currentYearAriaLabel	The label text for the button to select the current year as the value.
jutro-components.fields.DatePicker.placeholderMonth	The month part of the placeholder. Must be two repeated characters.
jutro-components.fields.DatePicker.placeholderYear	The year part of the placeholder. Must be four repeated characters.

Was this page helpful?

Examples​

Pick a month​

Controlled month picker​

Specify interval​

Usage​

Overview​

When to use​

When not to use​

Formatting​

Anatomy​

Date format​

Content​

General writing guidelines​

Include a label​

Add help text if it's meaningful​

Behaviors​

States​

Interactions​

Mouse​

Keyboard​

Screenreader​

Accessibility​

Code​

Import statement​

Component contract​

Properties​

labelrequired​

className​

disabled​

displayFormat​

displayOnly​

hideCurrentMonthButton​

hideLabel​

initialValue​

labelPosition​

maxMonth​

minMonth​

onBlur​

onChange​

onFocus​

placeholder​

readOnly​

required​

secondaryLabel​

stateMessages​

tooltip​

value​

Hooks​

Translation keys​

Date format and localization​

Escape Hatches​

Ref with imperative handlers​

Precedence of disabled, displayOnly, and readOnly properties​

User input validation​

Additional validation for MonthPicker​

Changelog​

10.5.0​

Examples

Pick a month

Controlled month picker

Specify interval

Usage

Overview

When to use

When not to use

Formatting

Anatomy

Date format

Content

General writing guidelines

Include a label

Add help text if it's meaningful

Behaviors

States

Interactions

Mouse

Keyboard

Screenreader

Accessibility

Code

Import statement

Component contract

Properties

`label`required

`className`

`disabled`

`displayFormat`

`displayOnly`

`hideCurrentMonthButton`

`hideLabel`

`initialValue`

`labelPosition`

`maxMonth`

`minMonth`

`onBlur`

`onChange`

`onFocus`

`placeholder`

`readOnly`

`required`

`secondaryLabel`

`stateMessages`

`tooltip`

`value`

Hooks

Translation keys

Date format and localization

Escape Hatches

Ref with imperative handlers

Precedence of `disabled`, `displayOnly`, and `readOnly` properties

User input validation

Additional validation for MonthPicker

Changelog

10.5.0