optimify-studioReact-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 --saveUsage
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);
}}
/>License
Copyright (c) 2017 Viacheslav Kysil. MIT License.