1. /**
  2. *需求:同年同月,同年不同月(两个月相减大于1,小于1),不同年(两个年相减大于1(是否为闰年),小于1),起止包含的月份及天
  3. */
  1. //首先引入组件
  2. import { DatePicker} from 'antd';
  3. const { RangePicker } = DatePicker;
  4.  
  5. //render中引入
  6.  
  7. <RangePicker style={{marginRight: 15}}
  8. format="YYYY-MM-DD"
  9. onChange={this.filterByDayRange}
  10. />
  1. //接下来是功能函数
  2. //计算开始天数差
  3. getStartEnd = (year, month, date) => {
  4. let number = 0;
  5. let start_day = parseInt(date);
  6. let end_day = parseInt(getMonthEndDate(year,month-1).split('-')[2]);
  7. return Math.abs(parseInt(end_day) - parseInt(start_day) + 1)
  8. }
  9.  
  10. // 判断某一年是平年还是闰年
  11. isLeapYear = (year) => {
  12. let number = 0;
  13. ((year%4==0) && (year%100!=0)) || (year%400==0) ? number = 366 : number = 365;
  14. // console.log(number)
  15. return number;
  16. }
  17.  
  18. //获取当两个年份差为1的天数
  19. getBetweenYears = (_year1,_year2,month1,month2,date1,date2) => {
  20. // 第一个日期
  21. let monthRange1 = [];
  22. let month1_mun1 = 0;
  23. let other_num1 = 0;
  24.  
  25. let len1 = 12 - parseInt(month1);
  26. if(len1 > 0){//若果月份之差大于0
  27. for(var j = 1; j <= len1; j ++){
  28. let _m1 = getMonthEndDate(_year1,Math.abs((parseInt(month1)+j) - 1)).split('-')[2];
  29.  
  30. monthRange1.push(parseInt(_m1))
  31. }
  32. other_num1 = monthRange1.reduce((sum,item) =>{//前面其他部分
  33. return sum + item;
  34. },0);
  35. month1_mun1 = this.getStartEnd(_year1,month1,date1);//前面第一部分
  36.  
  37. }else{//如果当前月为12月
  38. month1_mun1 = this.getStartEnd(_year1,month1,date1);//前面第一部分
  39. }
  40. // 第二个日期
  41. let monthRange2 = [];
  42. let month2_mun1 = 0;
  43. let other_num2 = 0;
  44.  
  45. let len2 = parseInt(month2) - 1;
  46. if(len2 > 0){//若果月份之差大于0
  47. for(var k = 1; k <= len2;k ++){
  48. let _m2 = getMonthEndDate(_year2,Math.abs((parseInt(month2)-k) - 1)).split('-')[2];
  49.  
  50. monthRange2.push(parseInt(_m2))
  51. }
  52. other_num2 = monthRange2.reduce((sum,item) =>{//前面其他部分
  53. return sum + item;
  54. },0);
  55. month2_mun1 = parseInt(date2);//前面第一部分
  56.  
  57. }else{//如果当前月为1月
  58. month2_mun1 = parseInt(date2);//前面第一部分
  59. }
  60. return parseInt(month1_mun1) + parseInt(other_num1) + parseInt(month2_mun1) + parseInt(other_num2);
  61. }
  62.  
  63. //计算天数(判断平年,闰年的天数)
  64. getDayNum = (day1, day2) => {
  65. let _num;//天数
  66. // console.log(day1, day2)
  67. let startArr = day1.split('-'),
  68. endArr = day2.split('-'),
  69. _year1 = startArr[0],
  70. _year2 = endArr[0],
  71. month1 = startArr[1],
  72. month2 = endArr[1],
  73. date1 = startArr[2],
  74. date2 = endArr[2];
  75.  
  76. if(_year1 == _year2){//同一年
  77. if(month1 == month2){//同年同月
  78. // console.log(month1)
  79. _num = Math.abs(parseInt(startArr[2]) - parseInt(endArr[2])) + 1;
  80. // console.log("同年同月",_num)
  81. }else{//同年不同月
  82. //计算month1和month2之间的月份
  83. let monthRange = [];
  84. let len = parseInt(month2) - parseInt(month1);
  85. // console.log(len)
  86. if(len > 1){//如果两个月相减大于1,统计中间的月份
  87. for(var i = 1; i < len; i++){
  88. let _m = getMonthEndDate(_year1,Math.abs((parseInt(month1)+i) - 1)).split('-')[2];
  89.  
  90. monthRange.push(parseInt(_m))
  91. }
  92. let other_num = monthRange.reduce((sum,item) =>{
  93. return sum + item;
  94. },0);
  95. let month1_mun = this.getStartEnd(_year1,month1,date1);
  96. let month2_mun = parseInt(date2);
  97. _num = parseInt(month1_mun) + parseInt(month2_mun) + parseInt(other_num);
  98. // console.log("同年不同月且月份相差大于1",_num)
  99.  
  100. }else{//如果两个月相减为1
  101. let month1_mun = this.getStartEnd(_year1,month1,date1);
  102. let month2_mun = parseInt(date2);
  103. _num = parseInt(month1_mun) + parseInt(month2_mun);
  104. // console.log("同年不同月且月份相差等于1",_num)
  105. }
  106. }
  107. }else{//不是同一年
  108. let yearRange = [];
  109. let other_year_num = 0;
  110. let _len = _year2 - _year1;
  111. if(_len > 1){
  112. for(var h = 1; h < _len; h++){
  113. let _y = parseInt(_year1 + h);
  114.  
  115. yearRange.push(this.isLeapYear(_y))
  116. }
  117.  
  118. other_year_num = yearRange.reduce((sum,item) =>{
  119. return sum + item;
  120. },0);
  121.  
  122. let other_month_num = this.getBetweenYears(_year1,_year2,month1,month2,date1,date2);
  123.  
  124. _num = parseInt(other_year_num) + parseInt(other_month_num);
  125.  
  126. // console.log("不同年且年份相减大于1",_num)
  127. }else{
  128.  
  129. _num = this.getBetweenYears(_year1,_year2,month1,month2,date1,date2);
  130.  
  131. // console.log("不同年且年份相减等于1",_num)
  132. }
  133.  
  134. }
  135.  
  136. return _num;
  137. }
  138.  
  139. //根据时间范围filterByDayRange
  140. filterByDayRange = (value,dateString) => {
  141. // console.log(dateString)
  142. if(dateString[0] != ''){
  143. let _num = this.getDayNum(dateString[0], dateString[1]);
  144.  
  145. let _startTime = dateString[0] + ' 00:00:00';;
  146. let _endTime = dateString[1] + ' 23:59:59';
  147.  
  148. this.setState({
  149. startTime: _startTime,
  150. endTime: _endTime,
  151. num: _num,
  152. current: 1
  153. }, () => {
  154. this.fetch(this.state.current, this.state.pageSize,this.getParamsObj());
  155. })
  156. }else{
  157. let start_end = this.getCurrentMonth();
  158. this.setState({
  159. startTime:start_end.start,
  160. endTime:start_end.end,
  161. current:1
  162. }, () => {
  163. this.fetch(this.state.current, this.state.pageSize,this.getParamsObj());
  164. })
  165. }
  166. }

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. Spring Boot 2 入门

    Spring Boot其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置. 参考网上资料,一路踩了几个坑,终于搞出了 ...

  2. Tutorial on word2vector using GloVe and Word2Vec

    Tutorial on word2vector using GloVe and Word2Vec 2018-05-04 10:02:53 Some Important Reference Pages ...

  3. [HDU] 平方和与立方和

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2007 //坑:注意判断输入两个数的前后大小关系 // 用while 循环 #include<io ...

  4. go 依赖工具glide

    添加gopath/bin目录到环境变量下 安装glide $ go get github.com/Masterminds/glide $ go install github.com/Mastermin ...

  5. HTTP 返回状态码说明

    HTTP 返回状态码一.1xx - 信息提示 这些状态代码表示临时的响应.客户端在收到常规响应之前,应准备接收一个或多个 1xx 响应. • 100 - 继续. • 101 - 切换协议. 二.2xx ...

  6. 【Selenium2】【Jenkins】

    1. 下载Tomcat ,Windows7 环境,http://tomcat.apache.org/  我下载的是版本8 2. 下载Jenkins,Windows7 环境,http://jenkins ...

  7. 51nod 1185 || 51nod 1072 威佐夫博弈

    贴个模板:平常的跟高精度java的: int: #pragma comment(linker, "/STACK:1024000000,1024000000") #include&l ...

  8. onpause 与 onresume

  9. CentOS6.5下搭建SVN服务器

    1.检查是否已安装 rpm -qa | grep subversion 如果要卸载旧版本: yum remove subversion 2.安装 yum install subversion PS:y ...

  10. C++.构造函数(超出范围)_01

    环境:Win7x64.Qt5.3.2 MSVC2010 OpenGL.vs2010 1.ZC:在 构造函数 中,基类访问子类的成员 会报内存错误,如果访问的是 基本类型的话(如int) 可能还不会出错 ...