# p-month-picker

> A web component for picking year and month.

Latest version **1.1.0** (published 2021-03-26) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install p-month-picker
pnpm add p-month-picker
yarn add p-month-picker
bun add p-month-picker
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2021-03-26 |
| First published | 2021-01-29 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 11 |
| Unpacked size | 34.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Pekka Maanpää |
| Maintainers | pekam |
| Keywords | Vaadin, month-picker, web-components, web-component, lit-element |

## Links

- npm: https://www.npmjs.com/package/p-month-picker
- Repository: https://github.com/pekam/p-month-picker
- Homepage: https://github.com/pekam/p-month-picker#readme
- Issues: https://github.com/pekam/p-month-picker/issues
- npm.io page: https://npm.io/package/p-month-picker

## Dependencies (11)

- [tslib](https://npm.io/package/tslib.md) ^1.10.0
- [lit-html](https://npm.io/package/lit-html.md) ^1.0.0
- [lit-element](https://npm.io/package/lit-element.md) ^2.0.0
- [@vaadin/element-base](https://npm.io/package/@vaadin/element-base.md) ^0.3.0
- [@vaadin/vaadin-overlay](https://npm.io/package/@vaadin/vaadin-overlay.md) ^3.5.0
- [@vaadin/themable-element](https://npm.io/package/@vaadin/themable-element.md) ^0.2.0
- [@vaadin/vaadin-text-field](https://npm.io/package/@vaadin/vaadin-text-field.md) ^2.8.1
- [@vaadin/vaadin-lumo-styles](https://npm.io/package/@vaadin/vaadin-lumo-styles.md) ^1.5.0
- [@vaadin/control-state-mixin](https://npm.io/package/@vaadin/control-state-mixin.md) ^0.1.0
- [@vaadin/vaadin-themable-mixin](https://npm.io/package/@vaadin/vaadin-themable-mixin.md) ^1.5.2
- [@vaadin/vaadin-material-styles](https://npm.io/package/@vaadin/vaadin-material-styles.md) ^1.2.3

## Recent versions

- 1.1.0 (latest) — 2021-03-26
- 1.0.0 — 2021-02-26
- 0.2.0 — 2021-02-26
- 0.1.1 — 2021-01-29
- 0.1.0 — 2021-01-29

## README

# <p-month-picker>

`<p-month-picker>` is a Web Component for selecting month and year.
It is built with [LitElement](https://lit-element.polymer-project.org/) and [Vaadin components](https://vaadin.com/components).
The default styles are based on Vaadin's Lumo theme.

<img src="https://raw.githubusercontent.com/pekam/p-month-picker/master/screenshot.png" alt="Screenshot of p-month-picker component" height="250px">

```html
<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
```js
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):
```js
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`:
```js
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

---
_Source: https://npm.io/package/p-month-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._