/**
*需求:同年同月,同年不同月(两个月相减大于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());
})
}
}

Ant Design 日期选择组件RangePicker 选择时间范围后计算范围内的天数。的更多相关文章

  1. 封装一个漂亮的ant design form标签组件

    在ant design 的form组件中 能用于提交的组件比较少,所以我在这写了一个可以单选.多选标签提交的组件,调用非常简单. 代码: import React,{Fragment} from 'r ...

  2. 2017.11.6 - ant design table等组件的使用,以及 chrome 中 network 的使用

    一.今日主要任务 悉尼小程序后台管理开发: 景点管理页面: 获取已有数据列表,选取部分数据呈现在表格中,根据景点名称.分类过滤出对应的景点.   二.难点 1. 项目技术选取: ant design. ...

  3. 使用Ant Design的select组件时placeholder不生效/不起作用的解决办法

    先来说说使用Ant Design和Element-ui的感觉吧. 公司的项目开发中用的是vue+element-ui,使用了一通下来后,觉得element-ui虽然也有一些问题或坑,但这些小问题或坑凭 ...

  4. react的ant design的UI组件库

    PC官网:https://ant.design/ 移动端网址:https://mobile.ant.design/docs/react/introduce-cn antd-mobile :是 Ant ...

  5. Ant Design的Form组件中FormItem名称相同引起的问题

    1.问题描述 在使用Antd组件Form表单的过程中,会出现FormItem同名的情况,此时要特别注意同名引起的表单行为异常问题,主要表现在以下方面: (1)同名表单项的值共享,并且其中一个的值改变, ...

  6. ant design 的Table组件固定表头时不对齐

    现在有一个表格,里面的列数是不固定的(可以重复写入数据),且列数行数都可能很多,就带来一个问题: 必须要固定表头,但是antd 的表格组件设置了固定表格 scroll={{x:1000,y:300}} ...

  7. Ant Design of Vue 组件库的使用

    文档里面很清楚 安装步骤    这是全部引入的 1  有的组价涉及到汉化的问题 import moment from 'moment' import '../../../../node_modules ...

  8. react+ant design 项目执行yarn run eject 命令后无法启动项目

    如何将内建配置全部暴露? 使用create-react-app结合antd搭建的项目中,项目目录没有该项目所有的内建配置, 1.执行yarn run eject 执行该命令后,运行项目yarn sta ...

  9. React组件库Ant Design的安装与使用

    一.什么是 Ant Design 1.Ant Design 提炼自企业级中后台产品的交互语言和视觉风格 2.Ant Design 使用 TypeScript 构建,提供完整的类型定义文件 二.Ant ...

随机推荐

  1. P3810 【模板】三维偏序(陌上花开)(cdq分治)

    思路 看到这种偏序类的题目,而且不要求强制在线,可以立刻想到cdq分治 注意这题有一个问题,就是询问的是小于等于而不是小于,如果相等的话两个元素会相互贡献,而cdq的特点是右区间不能对左边有影响,所以 ...

  2. 论文笔记:Variational Capsules for Image Analysis and Synthesis

    Variational Capsules for Image Analysis and Synthesis  2018-07-16 16:54:36 Paper: https://arxiv.org/ ...

  3. js变量按照存储方式区分,有哪些类型,并表述其特点

    // 值类型 拷贝形式 不像引用类型是指针指向,共用空间 值类型有 undefined string number Boolean var a = 100; var b = a; var a = 20 ...

  4. .Net Core之Swagger

    1.项目生成xml 2.添加链接文件,并将属性设值为始终复制 3.添加swagger引用:Swashbuckle.AspNetCore 4.startup.cs配置swargger的xml来源: Co ...

  5. POJ 1426 Find The Multiple(寻找倍数)

    POJ 1426 Find The Multiple(寻找倍数) Time Limit: 1000MS    Memory Limit: 65536K Description - 题目描述 Given ...

  6. C语言调用Python 混合编程

    导语 Python有很多库,Qt用来编写界面,自然产生C++调用Python的需求.一路摸索,充满艰辛 添加头文件搜索路径,导入静态库 我的python头文件搜索路径:C:\Python27amd64 ...

  7. 20. --erg--=--org--=--urg-- 做,工作 (词20、21)

    词汇速记21

  8. 爬虫系列之BeautifulSoup

    BeautifulSoup是处理爬虫的一个强大工具,在HTML页面中,是由各种标签构成的,BeautifulSoup的功能就是从标签下手的,它是解析.遍历.维护“标签树”的功能库. Beautiful ...

  9. Linux命令之nl命令

    nl 命令在 Linux 系统中用来计算文件中行号.nl 可以将输出的文件内容自动的加上行号,其默认的结果和 与 cat -n 有点不太一样,nl 可以将行号做比较多的显示设计,包括位数是否自动补齐 ...

  10. Android CPU耗电量测试

    Android CPU耗电量测试 在测试Android app时,不仅仅要关注app的功能,也好关注app的性能指标,cpu.内存.流量.电量等.简单介绍下电量测试中的cpu耗电. 影响耗电的因素 C ...