dashboard/src/charts/DatePickerCharts.js

import React, {Component} from 'react';
import {Col, DatePicker, Row} from 'antd';
import {observer} from 'mobx-react';
import * as config from "../config";
import moment from "moment";
import {stores_Context} from "../config";

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

    constructor(props) {
        super(props);
    }


    render() {
        const {date_picker_store} = this.context;
        return (
            <div>
                <Row>
                    <Col span={24}>
                        <DatePicker.RangePicker format={config.DATE_FORMAT}
                                                allowClear={false}
                                                value={[date_picker_store.start_date, date_picker_store.end_date]}
                                                onChange={date_picker_store.onChange_dataPicker}
                                                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')],
                                                    '近30天': [moment().subtract(30, 'days'), moment()],
                                                    '上个月': [moment().subtract(1, 'months').startOf('month'), moment(new Date()).subtract(1, 'months').endOf('month')],
                                                    '近三个月': [moment().subtract(2, 'month').startOf('month'), moment().endOf('month')],
                                                    '今年': [moment().startOf('year').subtract(1, 'month'), moment().endOf('year').subtract(1, 'month')],
                                                    '去年': [moment().subtract(1, 'year').startOf('year').subtract(1, 'month'), moment().subtract(1, 'year').endOf('year').subtract(1, 'month')],
                                                }}
                        />
                    </Col>
                    {this.props.hide_vs ? '' : <Col span={24}>
                        <DatePicker.RangePicker bordered={false} format={config.DATE_FORMAT}
                                                value={[date_picker_store.start_date_cp, date_picker_store.end_date_cp]}
                                                placeholder={['对比 Start date', 'End date']}
                                                onChange={date_picker_store.onChange_dataPicker_cp}
                                                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').subtract(1, 'month'), moment().subtract(1, 'year').endOf('year').subtract(1, 'month')],
                                                }}
                        />
                    </Col>}
                </Row>

            </div>
        );
    }
}

export default observer(DatePickerCharts);