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(props) {
    super(props);
    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,
      day: this.day,
      select: {
        year: this.year,
        month: this.month,
        day:  0,
        hour:0,
        minute:0,
        second:0
      }
    }
  }
  componentDidMount(){
    this.setState({
      year: this.props.timeLis && this.props.timeLis.year || this.year,
      month: this.props.timeLis && this.props.timeLis.month || this.month,
      day: this.props.timeLis && this.props.timeLis.day || this.day,
      select: {
        year: this.props.timeLis && this.props.timeLis.year || this.year,
        month: this.props.timeLis && this.props.timeLis.month || this.month,
        day: this.props.timeLis && this.props.timeLis.day || this.day,//这里设置初始选中的值
        hour: this.props.timeLis && this.props.timeLis.hour,
        minute: this.props.timeLis && this.props.timeLis.minute,
        second: this.props.timeLis && this.props.timeLis.second
      }
    })
  }
  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.state.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
    });
  }
  timeSure() {
    if (this.inputing) {
      return;
    }
    this.inputing = true;
    let info = this.state.select
    info.year = this.state.year;
    info.month = this.state.month;
    // info.day = this.state.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.timeSure(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.timeSure(Object.assign({}, 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} day={this.state.select.day} handleChange={(info) => { this.handleChange(info) }} /> : null;
  }
  render() {
    return (
      <div className={style.wrapper} id="calendarDate" style={{ top: this.props.top }}>
        <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} day={this.state.day} handleClick={(info) => this.handleChange(info)} canSelectFuture={this.props.canSelectFuture} />
        {this.genTimeComponent()}
        {
          this.props.sure ? <div className={style.timeSure} onClick={() => this.timeSure({})}>确定</div> : ''
        }
      </div>
    )
  }

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

export default Calendar;

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