README

<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

Usage no npm install needed!