<p-month-picker>

<p-month-picker> is a Web Component for selecting month and year. It is built with LitElement and Vaadin components. The default styles are based on Vaadin's Lumo theme.

<p-month-picker
  label="Starting month"
  value="2021-03"
  min="2018-01"
  max="2021-09">
</p-month-picker>

Installing

npm install p-month-picker

Properties

| Name | Type | Example value | | ------------- | ------------- | ------------- | | value | string | "01-2021" | | min | string | "01-2020" | | max | string | "12-2021" | | opened | boolean | false | | label | string | "Starting month" | | placeholder | string | "Pick a month" | | disabled | boolean | false | | readonly | boolean | false | | invalid | boolean | false | | monthLabels | string[] | ["Jan", ..., "Dec"] |

Reacting to value changes

const monthPicker = document.querySelector('p-month-picker');

monthPicker.addEventListener('change', e =>
  console.log('New value: ' + e.target.value));

Internationalization (i18n)

Translating month labels in the overlay (to Finnish in this example):

monthPicker.monthLabels = [
  'Tammi', 'Helmi', 'Maalis', 'Huhti',
  'Touko', 'Kesä', 'Heinä', 'Elo',
  'Syys', 'Loka', 'Marras', 'Joulu'
]

Customizing the presentation format

You can customize how the current value is presented in the input field by overriding the formatValue and parseValue functions.

This example changes the format from 1/2020 to Jan 2020:

monthPicker.formatValue = ({year, month}) =>
  `${monthPicker.monthLabels[month - 1]} ${year}`;

monthPicker.parseValue = (inputValue) => {
  const [firstWord, secondWord] = inputValue.split(' ');
  const month = monthPicker.monthLabels
    .findIndex((label) => label === firstWord) + 1;
  if (month < 1) {
    return null;
  }
  const year = parseInt(secondWord);
  if (isNaN(year)) {
    return null;
  }
  return { month, year };
};

License

Apache License 2.0