import React, { Component } from 'react'; import './index.less'; import { DatePicker } 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> ); } }