Skip to main content

Month picker

Month picker in Storybook

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,
  }}
/>