newICSS/src/common/components/Calendar/index.jsx

import React from 'react'
import style from './index.less'
import PropTypes from 'prop-types'
import {YearList, MonthList} from './SelectList'
import Content from './Content'
import Time from './Time'


/**
 * handleChange: 时间改变时会触发的方法(在点击具体日期和输入改变时分秒时触发)
 *               该方法会传入一个对象如{year:2018,month:1,day:1,hour:1,minute:1,second:1}
 * needTime:是否显示下方时间输入控件  不显示则默认的时分秒为0
 */
class Calendar extends React.Component {
    constructor() {
        super();
        const date=new Date();
        this.year=date.getFullYear();
        this.month=date.getMonth()+1;
        this.day=date.getDate();
        this.inputing=false;
        this.state = {
            year:  this.year,
            month:  this.month,
            select:{
                year:  this.year,
                month:  this.month,
                day: 0,//这里设置初始选中的值
                hour:0,
                minute:0,
                second:0
            }
        }
    }

    handleYearSelect(year) {
        if(year===this.year && this.state.month>this.month){
            this.setState({
                year: year,
                month:this.month
            });
        }else{
            this.setState({
                year: year
            });
        }
    }

    handleMonthSelect(month) {
        this.setState({
            month: month
        });
    }

    handleChange(info){
        if(this.inputing){
            return;
        }
        this.inputing=true;
        info.year=this.state.year;
        info.month=this.state.month;
        // info.day = this.day;//没选日就加上默认值
        if(info.hour==null){
            info.hour=this.state.select.hour;
            info.minute=this.state.select.minute;
            info.second=this.state.select.second;
        }
        this.props.handleChange(Object.assign({},info));
        this.setState({
            select:info
        });
    }

    handleTodayClick(){
        const info={
            year:this.year,
            month:this.month,
            day:this.day,
            hour:this.state.select.hour,
            minute:this.state.select.minute,
            second:this.state.select.second
        };
        this.setState({
            select:info
        });
        this.props.handleChange(info);
    }

    genTimeComponent(){
        return this.props.needTime?<Time hour={this.state.select.hour} minute={this.state.select.minute} second={this.state.select.second} handleChange={(info)=>{this.handleChange(info)}}/>:null;
    }
    render() {
        return (
            <div className={style.wrapper}>
                <div className={style.top}>
                    <div className={style.year}>
                        <YearList select={this.state.year} canSelectFuture={this.props.canSelectFuture} handleChange={(info) => this.handleYearSelect(info)}/>
                    </div>
                    <div className={style.month}>
                        <MonthList year={this.state.year} canSelectFuture={this.props.canSelectFuture} select={this.state.month} handleChange={(info) => this.handleMonthSelect(info)}/>
                    </div>
                    <div className={style.button}>
                        <button onClick={()=>this.handleTodayClick()}>{'今天'}</button>
                    </div>
                </div>
                <Content selectTime={this.state.select} year={this.state.year} month={this.state.month} handleClick={(info)=>this.handleChange(info)} canSelectFuture={this.props.canSelectFuture}/>
                {this.genTimeComponent()}
            </div>
        )
    }

    componentDidUpdate(){
        this.inputing=false;
    }
}

export default Calendar;

Calendar.propTypes = {
    handleChange: PropTypes.func,
    needTime:PropTypes.bool,
    canSelectFuture:PropTypes.bool
};