基于react快速定位日期选择（昨日，今日，本周，本月）

效果图:

组件的使用：

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


        交易时间： 
        
            
        
 

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(
        

          
            
              
                今日
                昨日
                本周
                本月
                
            
            
              
            
           
        
      )
    }
  }

MyDatePicker.scss:

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