@la-components/react-month-picker

React-Month-Picker-Component

Demo react-Month-Picker-demo

Basic Usage

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { LaMonthPicker } from '@la-components/react-month-picker';
import '@la-components/react-month-picker/dist/style.css';

export default class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            selectedYear: 2021,
            selectedMonth: 10,
            selectedFromDay: 1,
            selectedToDay: 31,
        };
    }

    onYearChange(year){
        this.setState({selectedYear: year});
    }

    onMonthChange(month){
        this.setState({selectedMonth: month});
    }

    onFromDayChange(fromDay){
        this.setState({selectedFromDay: fromDay});
    }

    onToDayChange(toDay){
        this.setState({selectedToDay: toDay});
    }

    render() {
        return (
            <div>
                <LaMonthPicker 
                    onYearChange={this.onYearChange}
                    onMonthChange={this.onMonthChange}
                    onFromDayChange={this.onFromDayChange}
                    onToDayChange={this.onToDayChange}
                    defaultDate="2021-10-01"
                    minDate="2018-10-01"
                    maxDate="2021-10-31"
                    labelMonthPicker="Tháng"
                    isShowDayRange={true}
                />
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("app"));

Props

MonthPicker.propTypes = {
    onYearChange: PropTypes.func.isRequired,
    onMonthChange: PropTypes.func.isRequired,
    onFromDayChange: PropTypes.func.isRequired,
    onToDayChange: PropTypes.func.isRequired,
    defaultDate: PropTypes.string,
    minDate: PropTypes.string,
    maxDate: PropTypes.string,
    labelMonthPicker: PropTypes.string,
    isShowDayRange: PropTypes.bool
}