# month-year-picker

> Allow to select month and year.

Latest version **0.2.5-alpha-1** (published 2019-12-09) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.2.5-alpha-1 |
| Published | 2019-12-09 |
| First published | 2019-11-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 344.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Gayathri R N |
| Maintainers | gayathriraj |
| Keywords | Month Picker, Picker, Year Picker, Month Year Picker |

## Links

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

## Dependencies (5)

- [react](https://npm.io/package/react.md) ^16.8.6
- [date-fns](https://npm.io/package/date-fns.md) ^2.7.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.6
- [react-scripts](https://npm.io/package/react-scripts.md) 3.0.1
- [styled-components](https://npm.io/package/styled-components.md) ^3.0.2

## Recent versions

- 0.2.5-alpha-1 (latest) — 2019-12-09
- 0.2.5-alpha — 2019-11-18
- 0.2.5 — 2019-11-17
- 0.1.4 — 2019-11-14
- 0.1.3 — 2019-11-14
- 0.1.2 — 2019-11-14
- 0.1.1 — 2019-11-14
- 0.1.0 — 2019-11-14

## README

# MonthYearPicker

Allow to select month and year.

* Install by executing `npm install month-year-picker`.
* Import by adding `import MonthPicker from 'month-year-picker'`.
* Use by adding `<MonthPicker  name="..." />`.

<img src="./src/images/example-1.png" alt="Example-1" />

## Demo
<img src="./src/images/MPDemo2.gif" alt="Example-1" />

### Usage

Here's an example of basic usage:

```js
import React, { Component } from 'react';
import MonthPicker from 'month-year-picker';

class MyApp extends Component {
  render() {
    return (
      <div>
        <MonthPicker
          name="MonthYear"
          allowedYears={{ "after": new Date().getFullYear() - 2 }}
        />
      </div>
    );
  }
}
```
## User guide

#### Props

|Prop name|Description|Default value|Example values|
|----|----|----|----|
|className|Class name that will be added to rendered element along with the default.|n/a|<ul><li>String:<br />`"custom-class-name-1"`</li></ul>|
|Id|Id for Month Picker.|n/a|<ul><li>String:<br />`"MonthYear"`</li></ul>|
|allowedYears|allowedYears for Month Picker.|n/a|<ul><li>object:<br />`{ "after": new Date().getFullYear() - 2,"before": new Date().getFullYear() + 4}`</li></ul>|
|ChangeYearFormat|Change year format to YYYY.|false|<ul><li>Boolean:<br />`true`</li></ul>|
|hintText|hint text shown in picker.|"MM/YY"|<ul><li>String:<br />`"MM/YY"`</li></ul>|
|primaryColor|Background Color of Month Picker.|"#27718c"|<ul><li>String:<br />`"#4776E6"`</li></ul>|
|secondaryColor|Text Color of Month Picker.|"#898989"|<ul><li>String:<br />`"#898989"`</li></ul>|
|textFieldStyle|Text field Style for Month Picker.|n/a|<ul><li>Array:<br />`{color:"black"}`</li></ul>|
|disabled|For disabling Month Picker.|false|<ul><li>Boolean:<br />`true`</li></ul>|

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