Nonsense Parser Microframework

    p-month-picker
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    <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.

    Screenshot of p-month-picker component

    <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

    Install

    npm i p-month-picker

    DownloadsWeekly Downloads

    5

    Version

    1.1.0

    License

    Apache-2.0

    Unpacked Size

    35.8 kB

    Total Files

    20

    Last publish

    Collaborators

    • pekam