Ant Design 日期选择组件RangePicker 选择时间范围后计算范围内的天数。

/**
*需求:同年同月,同年不同月(两个月相减大于1,小于1),不同年(两个年相减大于1(是否为闰年),小于1),起止包含的月份及天
*/
//首先引入组件
import { DatePicker} from 'antd';
const { RangePicker } = DatePicker;

//render中引入

<RangePicker style={{marginRight: 15}}
    format="YYYY-MM-DD"
    onChange={this.filterByDayRange}
/>
                            
//接下来是功能函数
//计算开始天数差
    getStartEnd = (year, month, date) => {
        let number = 0;
        let start_day = parseInt(date);
        let end_day = parseInt(getMonthEndDate(year,month-1).split('-')[2]);
        return Math.abs(parseInt(end_day) - parseInt(start_day) + 1)
    }

    // 判断某一年是平年还是闰年
    isLeapYear = (year) => {
        let number = 0;
        ((year%4==0) && (year%100!=0)) || (year%400==0) ? number = 366 : number = 365;
        // console.log(number)
        return number;
    }

    //获取当两个年份差为1的天数
    getBetweenYears = (_year1,_year2,month1,month2,date1,date2) => {
        // 第一个日期
        let monthRange1 = [];
        let month1_mun1 = 0;
        let other_num1 = 0;
        
        let len1 = 12 - parseInt(month1);
        if(len1 > 0){//若果月份之差大于0
            for(var j = 1; j <= len1; j ++){
                let _m1 = getMonthEndDate(_year1,Math.abs((parseInt(month1)+j) - 1)).split('-')[2];

                monthRange1.push(parseInt(_m1))
            }
            other_num1 = monthRange1.reduce((sum,item) =>{//前面其他部分
                return sum + item;
            },0);
            month1_mun1 = this.getStartEnd(_year1,month1,date1);//前面第一部分
            
        }else{//如果当前月为12月
            month1_mun1 = this.getStartEnd(_year1,month1,date1);//前面第一部分
        }
        // 第二个日期
        let monthRange2 = [];
        let month2_mun1 = 0;
        let other_num2 = 0;
        
        let len2 = parseInt(month2) - 1;
        if(len2 > 0){//若果月份之差大于0
            for(var k = 1; k <= len2;k ++){
                let _m2 = getMonthEndDate(_year2,Math.abs((parseInt(month2)-k) - 1)).split('-')[2];

                monthRange2.push(parseInt(_m2))
            }
            other_num2 = monthRange2.reduce((sum,item) =>{//前面其他部分
                return sum + item;
            },0);
            month2_mun1 = parseInt(date2);//前面第一部分
            
        }else{//如果当前月为1月
            month2_mun1 = parseInt(date2);//前面第一部分
        }
         return  parseInt(month1_mun1) + parseInt(other_num1) + parseInt(month2_mun1) + parseInt(other_num2);
    }
    
    //计算天数(判断平年,闰年的天数)
    getDayNum = (day1, day2) => {
        let _num;//天数
        // console.log(day1, day2)
        let startArr = day1.split('-'),
         endArr = day2.split('-'),
         _year1 = startArr[0],
         _year2 = endArr[0],
         month1 = startArr[1],
         month2 = endArr[1],
         date1 = startArr[2],
         date2 = endArr[2];

        if(_year1 == _year2){//同一年
            if(month1 == month2){//同年同月
                // console.log(month1)
                _num = Math.abs(parseInt(startArr[2]) - parseInt(endArr[2])) + 1;
                // console.log("同年同月",_num)
            }else{//同年不同月
                //计算month1和month2之间的月份
                let monthRange = [];
                let len = parseInt(month2) - parseInt(month1);
                // console.log(len)
                if(len > 1){//如果两个月相减大于1,统计中间的月份
                    for(var i = 1; i < len; i++){
                        let _m = getMonthEndDate(_year1,Math.abs((parseInt(month1)+i) - 1)).split('-')[2];

                        monthRange.push(parseInt(_m))
                    }
                    let other_num = monthRange.reduce((sum,item) =>{
                        return sum + item;
                    },0);
                    let month1_mun = this.getStartEnd(_year1,month1,date1);
                    let month2_mun = parseInt(date2);
                    _num = parseInt(month1_mun) + parseInt(month2_mun) + parseInt(other_num);
                    // console.log("同年不同月且月份相差大于1",_num)
                    
                }else{//如果两个月相减为1
                    let month1_mun = this.getStartEnd(_year1,month1,date1);
                    let month2_mun = parseInt(date2);
                    _num = parseInt(month1_mun) + parseInt(month2_mun);
                    // console.log("同年不同月且月份相差等于1",_num)
                }
            }
        }else{//不是同一年
            let yearRange = [];
            let other_year_num = 0;
            let _len = _year2 - _year1;
            if(_len > 1){
                for(var h = 1; h < _len; h++){
                    let _y = parseInt(_year1 + h);
                    
                    yearRange.push(this.isLeapYear(_y))
                }
            
                other_year_num = yearRange.reduce((sum,item) =>{
                    return sum + item;
                },0);

                let other_month_num = this.getBetweenYears(_year1,_year2,month1,month2,date1,date2);

                _num = parseInt(other_year_num) + parseInt(other_month_num);
                
                // console.log("不同年且年份相减大于1",_num)
            }else{
                
                _num = this.getBetweenYears(_year1,_year2,month1,month2,date1,date2);
                
                // console.log("不同年且年份相减等于1",_num)
            }
            
        }

        return _num;
    }

    //根据时间范围filterByDayRange
    filterByDayRange = (value,dateString) => {
        // console.log(dateString)
        if(dateString[0] != ''){
            let _num = this.getDayNum(dateString[0], dateString[1]);

            let _startTime = dateString[0] + ' 00:00:00';;
            let _endTime = dateString[1] + ' 23:59:59';
            
            this.setState({
                startTime: _startTime,
                endTime: _endTime,
                num: _num,
                current: 1
            }, () => {
                this.fetch(this.state.current, this.state.pageSize,this.getParamsObj());
            })
        }else{
            let start_end = this.getCurrentMonth();
            this.setState({
                startTime:start_end.start,
                endTime:start_end.end,
                current:1
            }, () => {
                this.fetch(this.state.current, this.state.pageSize,this.getParamsObj());    
            })
        }
    }

 

posted @ 2018-02-01 16:21  一江西流  阅读(15235)  评论(0编辑  收藏  举报