dashboard/src/components/search/DatePickerCharts.jsx

import React, { Component } from "react";
import { Col, DatePicker, Row, Form } from "antd";
import { observer } from "mobx-react";
import * as config from "../../config";
import moment from "moment";
import "moment/locale/zh-cn";
import locale from "antd/es/date-picker/locale/zh_CN";
import { stores_Context } from "../../config";

// 1.0的搜索组件 不需要Form包裹
const SectionWrapper = ({ isform, id, title, children, right, ...extProps }) =>
  !isform ? (
    <>{children}</>
  ) : (
    <Form.Item noStyle {...extProps}>
      {children}
    </Form.Item>
  );

// 用于日期选择，计算上一时间段、同比时间等
class DatePickerCharts extends Component {
	static contextType = stores_Context;

	constructor(props) {
		super(props);
	}

	render() {
		const { date_picker_store } = this.context;
    const { isform } = this.props;
    const defaultV = [date_picker_store.start_date, date_picker_store.end_date];
    const defaultVdiff = [date_picker_store.start_date_cp, date_picker_store.end_date_cp];
		return (
			<div>
				<Row>
					<Col span={24}>
          <SectionWrapper {...{isform: isform || false, initialValue: defaultV, name: `applyDate`}} >
						<DatePicker.RangePicker
							style={{width: '100%'}}
							format={config.DATE_FORMAT}
							locale={locale}
							allowClear={false}
              {...(isform ? {} : {value: defaultV})}
							onChange={(e) => {
                  date_picker_store.onChange_dataPicker(e);
                  if (typeof this.props.onChange === 'function') {
                    this.props.onChange(e);
                  }
                }
              }
							ranges={{
								本周: [moment().startOf("week"), moment().endOf("week")],
								上周: [moment().startOf("week").subtract(7, "days"), moment().endOf("week").subtract(7, "days")],
								本月: [moment().startOf("month"), moment().endOf("month")],
								上个月: [moment().subtract(1, "months").startOf("month"), moment(new Date()).subtract(1, "months").endOf("month")],
								近7天: [moment().subtract(7, "days"), moment()],
								近30天: [moment().subtract(30, "days"), moment()],
								近三个月: [moment().subtract(2, "month").startOf("month"), moment().endOf("month")],
								今年: [moment().startOf("year"), moment().endOf("year")],
								去年: [moment().subtract(1, "year").startOf("year"), moment().subtract(1, "year").endOf("year")],
							}}
						/>
            </SectionWrapper>
					</Col>
					{this.props.hide_vs ? (
						""
					) : (
						<Col span={24}>
            <SectionWrapper {...{isform: isform || false, initialValue: defaultVdiff, name: `applyDate2`}} >
							<DatePicker.RangePicker
								bordered={false}
								style={{width: '100%'}}
								format={config.DATE_FORMAT}
								locale={locale}
                {...(isform ? {} : {value: defaultVdiff})}
								placeholder={["对比 Start date", "End date"]}
								// onChange={date_picker_store.onChange_dataPicker_cp}
                onChange={(value) => {
                  if (typeof this.props.onChange === 'function') {
                    this.props.onChange(value);
                  }
                  date_picker_store?.onChange_dataPicker_cp(value);
                }}
								ranges={{
									上一时间段: date_picker_store.previous_date(),
									去年同期: date_picker_store.previous_year(),
									上周: [moment().startOf("week").subtract(7, "days"), moment().endOf("week").subtract(7, "days")],
									上个月: [moment().subtract(1, "months").startOf("month"), moment(new Date()).subtract(1, "months").endOf("month")],
									前个月: [moment().subtract(2, "month").startOf("month"), moment().subtract(2, "month").endOf("month")],
									前三个月: [moment().subtract(5, "month").startOf("month"), moment().subtract(3, "month").endOf("month")],
									去年: [moment().subtract(1, "year").startOf("year"), moment().subtract(1, "year").endOf("year")],
								}}
							/></SectionWrapper>
						</Col>
					)}
				</Row>
			</div>
		);
	}
}

export default observer(DatePickerCharts);