---
name: Monthpicker
menu: Components
---

# Monthpicker
import Monthpicker from './index'
import './style/index.scss'
import { Playground, Props } from 'docz'

## Props & Methods
<Props of={Monthpicker}/>

## Basic Usage
<Playground>
    <Monthpicker />
    <span style={{display: 'inline-block', width: '15px',}}></span>
    <Monthpicker placeholder={'I am placeholder'}/>
</Playground>

## Display Variant
<Playground>
    <Monthpicker
            placeholder={'No Icon!'}
            showIcon={false}
          />
    <span style={{display: 'inline-block', width: '15px',}}></span>
    <Monthpicker
            placeholder={'I am cleanable'}
            showClean
          />
    <span style={{display: 'inline-block', width: '15px',}}></span>
    <Monthpicker showPicker placeholder={'Show by default'}/>
    <span style={{display: 'inline-block', width: '15px',}}></span>
    <Monthpicker
            placeholder={'Disabled'}
            disabled
          />
    <span style={{display: 'inline-block', width: '15px',}}></span>
     <Monthpicker
            placeholder={'I am wider'}
            inputWidth={240}
          />
</Playground>

## Init Month/Year/Range
<Playground>
    <Monthpicker value={new Date()}/>
    <span style={{display: 'inline-block', width: '15px',}}></span>
    <Monthpicker initYear={new Date(2016, 1, 1)} placeholder={'Init the year'}/>
    <span style={{display: 'inline-block', width: '15px',}}></span>
    <Monthpicker
            placeholder={'Init the range'}
            initYear={new Date(2017, 1, 1)}
            minDate={new Date(2017, 1, 1)}
            maxDate={new Date(2017, 9, 1)}
          />
</Playground>

## Format
<Playground>
    <Monthpicker
            value={new Date()}
            dateFormat={'YYYY-MM'}
          />
</Playground>

## Set z-index
<Playground>
    <Monthpicker
    pickerZindex={123}
    placeholder={'Set z-index to 123'}
    />
</Playground>

## Inline
<Playground>
    <Monthpicker inline/>
</Playground>

## onChange
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                logArr: [],
            }
            this.handleSelect = this.handleSelect.bind(this);
            this.renderLogs = this.renderLogs.bind(this);
        }
        handleSelect(newDate, oldDate) {
            const logs = [`New Month: ${newDate}`, `Old Month: ${oldDate}`];
            this.setState({
            logArr: logs,
            });
        }
        renderLogs(logArr) {
            return logArr.map((log, index) => {
            return (
                <p
                key={index}
                >
                {log}
                </p>
            );
            });
        }
        render(){
            return <>
                {this.renderLogs(this.state.logArr)}
                <Monthpicker
                placeholder={'Pick a month'}
                onChange={this.handleSelect}
                />
            </>
        }
    }
    return <Example />
}}
</Playground>

## onChangeYear
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                logArr: [],
            }
            this.handleYearChange = this.handleYearChange.bind(this);
            this.renderLogs = this.renderLogs.bind(this);
        }
        handleYearChange(newYear, oldYear) {
          this.setState({
            logArr: [`New Year: ${newYear}`, `Old Year: ${oldYear}`]
          });
        }
        renderLogs(logArr) {
            return logArr.map((log, index) => {
            return (
                <p
                key={index}
                >
                {log}
                </p>
            );
            });
        }
        render(){
            return <>
                {this.renderLogs(this.state.logArr)}
                <Monthpicker
                placeholder={'Pick a year'}
                onChangeYear={this.handleYearChange}
                />
            </>
        }
    }
    return <Example />
}}
</Playground>