主要做了两个设置:
1、初始化默认选择日期;
2、限制日期可选范围(限制最大可选范围是最近6个月)
具体实现代码出下:
import React, { PureComponent } from 'react';
import moment from 'moment';
import {
Form,
Modal,
DatePicker,
} from 'antd';
const FormItem = Form.Item;
const { RangePicker } = DatePicker;
@Form.create()
class ExportModal extends PureComponent {
// 表单提交
okHandle = () => {
const { handleExportByTime, form } = this.props;
form.validateFields((err, fieldsValue) => {
const rangeValue = fieldsValue['range-picker'];
if (err) return;
const values ={
...fieldsValue,
'date': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],
}
// 重置表单
form.resetFields();
handleExportByTime(values);
});
};
// 不可选择的时间段
disabledDate = current => current && current > moment().endOf('day') || current < moment().subtract(6, 'months');
render() {
const {
form: { getFieldDecorator },
handleModalVisible,
submitting,
modalVisible,
} = this.props;
const formItemLayout = {
labelCol: { span: 4 },
wrapperCol: { span: 14 }
};
// 初始化日期显示
const defaultSelectDate = {
startDate: moment().subtract(1, 'weeks'),
endDate: moment().endOf('day')
}
return (
<Modal
destroyOnClose
title='按时间段导出'
centered
keyboard={false}
maskClosable={false}
visible={modalVisible}
confirmLoading={submitting}
onOk={this.okHandle}
onCancel={() => handleModalVisible()}
>
<FormItem {...formItemLayout} label='时间段' extra='最长可导出最近6个月数据'>
{getFieldDecorator('range-picker',{
initialValue: [defaultSelectDate.startDate, defaultSelectDate.endDate]
})(
<RangePicker disabledDate={this.disabledDate} />
)}
</FormItem>
</Modal>
);
}
}
export default ExportModal;