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, startDate } = this.props; if (startDate && date.isBefore(startDate)) return; this.setState({ value: date, leftValue: date, rightValue: date.clone().add(1, 'month'), }); if (onChange) onChange(date); } onRightSelect(date) { const { onChange, endDate } = this.props; if (endDate && date.isAfter(endDate)) return; 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() + 1}月 </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() + 1}月 </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, 'month'))} /> <Icon className="m-l-5" type="double-right" onClick={() => this.onRightSelect(rightValue.clone().add(1, 'year'))} /> </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> ); } }