效果图:

组件的使用：

 import FastDate from 'common/MyDatePicker'; //导入组件

<Row type="flex" align="middle">
        <Col ><span>交易时间：</span> </Col>
        <Col span={19}>
            <FastDate ref='myDatePicker' rangePicker ={this.rangePicker}></FastDate>
        </Col>
 </Row>

MyDatePicker.jsx:

import React from 'react';
import { DatePicker,Row,Col } from 'antd';
import styles from './MyDatePicker.scss';
import moment from 'moment';
const { RangePicker } = DatePicker;
export default class MyDatePicker extends React.Component {
    constructor(props, context){
      super(props, context);
      this.state = {
        isSelect:"day",
        date: [moment(),moment()],
      }
    }
     getCurrMonthDays = () => {
      let date = []
      let start = moment().add('month', 0).format('YYYY-MM') + '-01'
      let end = moment(start).add('month', 1).add('days', -1).format('YYYY-MM-DD')
      date.push(start.replace(/-/g,'/'))
      date.push(end.replace(/-/g,'/'))
      return date
    }
    clear = ()=>{
      this.setState({
        date:[],
        isSelect:""
      })
    }
    onChange = (date, dateString)=> {
      //判断今日 昨日 本周  本月回显
      let star = date[0].format('L');
      let end = date[1].format('L');
      let yesterDay = moment().subtract(1, 'days').format('L');
      let weekStar = moment().day(1).format('L');
      let weekEnd = moment().day(7).format('L');
      let monthStar = this.getCurrMonthDays()[0];
      let monthEnd = this.getCurrMonthDays()[1];
      console.log(monthStar,monthEnd,"-----")
      console.log(star,end,"=====")
      let isSelect;
      if(star == end  && star == moment().format('L')){
          isSelect ='day';
      }else if(yesterDay == star && yesterDay == end){
        isSelect ='yesterDay';
      }else if(star == weekStar && end == weekEnd){
        isSelect ='week';
      }else if(star == monthStar && end == monthEnd){
        isSelect ='month';
      }else{
        isSelect ="";
      }
      this.setState({
        date,
        isSelect
      },()=>{
          this.props.rangePicker(date);
      })
    }
    selectDate = (type) =>{
      let date;
      if(type=='day'){
        date = [moment(),moment()]
      }else if(type=='yesterDay'){
        date = [moment().subtract(1, 'days'),moment().subtract(1, 'days')]
      }else if(type=='week'){
        date = [ moment().day(1),moment().day(7)];
      }else{
        let data = this.getCurrMonthDays();
        date = [moment(data[0]),moment(data[1])];
      }
      this.setState({
        isSelect:type,
        date
      },()=>{
        this.props.rangePicker(date);
    })
    }
    render(){
      let {isSelect,date} = this.state;
      return(
        <div className={styles.container}>
          <Row type="flex" justify="space-around" align="middle">
            <Col span={12}>
              <Row justify="center">
                <Col className={isSelect=='day'?styles.active:''} onClick={this.selectDate.bind(this,'day')} span={6}>今日</Col>
                <Col className={isSelect=='yesterDay'?styles.active:''} onClick={this.selectDate.bind(this,'yesterDay')}  span={6}>昨日</Col>
                <Col className={isSelect=='week'?styles.active:''} onClick={this.selectDate.bind(this,'week')}  span={6}>本周</Col>
                <Col className={isSelect=='month'?styles.active:''} onClick={this.selectDate.bind(this,'month')}  span={6}>本月</Col>
              </Row>  
            </Col>
            <Col span={12}>
              <RangePicker  onChange={this.onChange} value={date} allowClear={false} />
            </Col>
          </Row> 
        </div>
      )
    }
  }

MyDatePicker.scss:

@charset 'UTF-8';
@import 'compass/css3';
.container{
	cursor: pointer;
}
.active{
	color:#40a9ff;
}