React-Month-Picker-Calendar

A month picker input and calendar for React.

API

| Name | Types | Default | Description | |---|---|---|---| | year | number | void | Preselect year in calendar | | month | number (0..11) | void | Preselect month in calendar. If both year and month are specified then input field will be also prepopulated | | inputProps | object | empty object | Input field props, only id and name are supported | | onChange | Function: (maskedValue: string, year: number, month: number) => any | - | onChange callback, receives maskedValue, year and month (begins with 0) as arguments | | closeOnSelect | boolean | false | Close calendar on month select | | onChangeYearUpdate | boolean | true | Handle year update with previous and next | | rangePicker | boolean | false | Will show the range default of 12 months | | inputRef | Function: (ref) => any | - | Modification of calendar input | | isOpen | boolean | - | to open automatically calendar on mount | | placeholder | string/any | MM/YY | to set a custom placeholder | | className | string/any | - | to set className of top level element for custom styling | | disabledInputChange | boolean | false | disabling the input field to input numbers |

Installation

npm install react-month-picker-calendar --save

Usage

React-Month-Picker-Calendar generates a year/month calendar opened on field focus.

var MonthPickerInput = require('react-month-picker-calendar');
require('react-month-picker-input/dist/react-month-picker-calendar.css');

<MonthPickerInput
  value={new Date()}
  onChangeYearUpdate={false}
  onChange={function(selectedYear, selectedMonth) {
    console.log(selectedYear, selectedMonth);
  }}
/>

License

Copyright (c) 2018. MIT License.

Acknowledgement This package is originally developed by Viacheslav Kysil