sourcecode/front/project/www/components/Date/index.js

import React, { Component } from 'react';
import moment from 'moment';
import './index.less';
import { DatePicker, Calendar, Icon } from 'antd';

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = { key: 0 };
    this.loading = false;
  }

  dateRender(date) {
    const { dateRender, checkRefresh } = this.props;
    if (!this.loading && checkRefresh) {
      if (checkRefresh(date, () => this.needRefresh())) {
        this.loading = true;
      }
    }
    if (dateRender) return dateRender(date);
    return <div className="ant-calendar-date">{date.get('date')}</div>;
  }

  needRefresh() {
    this.setState({ key: this.state.key + 1 });
    this.loading = false;
    setTimeout(() => {
      this.setState({ key: this.state.key + 1 });
    }, 1);
  }

  render() {
    const { show, hideInput, disabledDate, theme = '', value, onChange } = this.props;
    return (
      <div
        ref={ref => {
          if (!this.ref) {
            this.ref = ref;
            this.setState({ load: false });
          }
        }}
        className={`g-date-block ${hideInput ? 'hide-input' : ''}`}
      >
        <DatePicker
          open={show && this.ref}
          value={value}
          getCalendarContainer={() => this.ref.parentNode}
          dropdownClassName={`g-date ${theme} ${hideInput ? 'hide-input' : ''}`}
          disabledDate={disabledDate}
          dateRender={date => this.dateRender(date)}
          onChange={date => onChange(date)}
        />
      </div>
    );
  }
}

export class TwoDate extends Component {
  constructor(props) {
    super(props);
    const today = moment();
    this.state = {
      key: 0,
      value: today,
      leftValue: today.clone().subtract(1, 'month'),
      rightValue: today,
    };
  }

  dateRender(date) {
    const { checkRefresh } = this.props;
    if (!this.loading && checkRefresh) {
      if (checkRefresh(date, () => this.needRefresh())) {
        this.loading = true;
      }
    }
    return this.renderItem(date);
  }

  needRefresh() {
    this.setState({ key: this.state.key + 1 });
    this.loading = false;
    setTimeout(() => {
      this.setState({ key: this.state.key + 1 });
    }, 1);
  }

  renderItem(date) {
    const { value } = this.state;
    const { getType } = this.props;
    return (
      <div
        className={`ant-fullcalendar-date ${getType ? getType(date) : ''} ${value.diff(date) === 0 ? 'selected' : ''}`}
      >
        <div className="ant-fullcalendar-value">{date.get('date')}</div>
      </div>
    );
  }

  onLeftSelect(date) {
    const { onChange } = this.props;
    this.setState({
      value: date,
      leftValue: date,
      rightValue: date.clone().add(1, 'month'),
    });
    if (onChange) onChange(date);
  }

  onRightSelect(date) {
    const { onChange } = this.props;
    this.setState({
      value: date,
      rightValue: date,
      leftValue: date.clone().subtract(1, 'month'),
    });
    if (onChange) onChange(date);
  }

  leftHeadRender() {
    const { leftValue } = this.state;
    const { extendInfo } = this.props;
    return (
      <div className="t-c">
        <div style={{ left: 15, top: 0 }} className="p-a">
          <Icon
            className="m-r-5"
            type="double-left"
            onClick={() => this.onLeftSelect(leftValue.clone().subtract(1, 'year'))}
          />
          <Icon type="left" onClick={() => this.onLeftSelect(leftValue.clone().subtract(1, 'month'))} />
        </div>
        <span>{leftValue.year()}年 </span>
        <span>{leftValue.month()}月 </span>
        <span className="t-4">{extendInfo && extendInfo(leftValue)}</span>
      </div>
    );
  }

  rightHeadRender() {
    const { rightValue } = this.state;
    const { extendInfo } = this.props;
    return (
      <div className="t-c">
        <span>{rightValue.year()}年 </span>
        <span>{rightValue.month()}月 </span>
        <span className="t-4">{extendInfo && extendInfo(rightValue)}</span>
        <div style={{ right: 15, top: 0 }} className="p-a">
          <Icon type="right" onClick={() => this.onRightSelect(rightValue.clone().add(1, 'year'))} />
          <Icon
            className="m-l-5"
            type="double-right"
            onClick={() => this.onRightSelect(rightValue.clone().add(1, 'month'))}
          />
        </div>
      </div>
    );
  }

  render() {
    const { disabledDate } = this.props;
    const { leftValue, rightValue } = this.state;
    return (
      <div className="g-two-date">
        <div className="g-two-head">
          {this.leftHeadRender()}
          {this.rightHeadRender()}
        </div>
        <div className="g-two-body">
          <Calendar
            fullscreen={false}
            headerRender={data => this.leftHeadRender(data)}
            value={leftValue}
            disabledDate={disabledDate}
            dateFullCellRender={date => this.dateRender(date)}
            onSelect={date => this.onLeftSelect(date)}
            onPanelChange={date => this.onLeftSelect(date)}
          />
          <Calendar
            fullscreen={false}
            headerRender={data => this.rightHeadRender(data)}
            value={rightValue}
            disabledDate={disabledDate}
            dateFullCellRender={date => this.dateRender(date)}
            onSelect={date => this.onRightSelect(date)}
            onPanelChange={date => this.onRightSelect(date)}
          />
        </div>
      </div>
    );
  }
}