React-month-picker-input NPM

React-Month-Picker-Input

A month picker input and calendar for React.

Demo

Live demo: optimify-studio.github.io/react-month-picker-input

API

Name	Types	Default	Description
mode	enum	'normal'	Component mode. Available are 'normal', 'readOnly' (input cannot be changed, calendar can be opened but selection is disabled), 'calendarOnly' (input cannot be changed and date can be selected only though calendar)
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, the following attrs are supported: `id`, `name`, `className`, `size`, `maxLength`, `required`.
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
lang	string	en	One of: `en`, `ja`, `es`, `fr`, `ru`, `ua`, `hu`
i18n	i18n object (optional)	see i18n schema below	i18n object. For now date formats must be either `MM/YY` or `YY/MM`
minDate, maxDate	number, number	0, 1, 11, 9999	Limit selection with minDate or maxDate constraints

I18n config

Name	Types	Default	Description
monthFormat	string	'short'	One of: `short`, `long`. Display short or long format of month name (E.g. `Jan` or `January`)
dateFormat	{ lang: string }	see `src/i18n.js`	Object where langs are keys and values can either be `YY/MM` or `MM/YY`
monthNames	{ lang: string[] }	see `src/i18n.js`	Object where langs are keys and values are arrays of month names

Installation

npm install react-month-picker-input --save

Usage

React-Month-Picker-Input generates an input field and year/month calendar opened on field focus.

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

<MonthPickerInput
  year={2018}
  month={8}
  onChange={function(maskedValue, selectedYear, selectedMonth) {
    console.log(maskedValue, selectedYear, selectedMonth);
  }}
/>