JS日期区间选择和计算(一)技术篇

吐槽归吐槽,工作还是不能懈怠滴,接下来说说日期选择的问题吧

首先上需求:

  这个需求在后台管理里面是使用的比较频繁的,比如说在查询中:查询一周内的XXX,本月的XXX,上月的XXX等等的需求

技术解决方案:

  和月份相关计算要抓住一个不变的日期,因为大家都知道每个月的天数是都不一样的,有28天,29天,30天和31天,所以要进行精确的计算就得抓住共性那就是每个月都有1号,和月份相关的计算1号这我觉得是一个关键点有了这一天你就可以随心所欲的进行日期操控

  需求一:选择上个月我要显示出上个月月初和月末两个时间

  假如这个月是8月那么所需要的两个日期就是2016-07-01和2016-07-31,初始日期每个月都一样很简单都是1号,而月末日期就像上面所说的就会有4中可能性,所以很简单的做法就是2016-08-01的时间戳减去一天的时间戳就是上个月月末,在这里大家还要注意当本月是1月和12月的情况,我们的算法思路说的差不多了,下面我们就看看代码

  1 /**
  2              * 日期格式化
  3              * @param data
  4              * @returns {string}
  5              */
  6             function getFormatData(data) {
  7                 return data?[data.getFullYear(),is2length(data.getMonth()+1),is2length(data.getDate())].join(‘-‘):‘‘
  8             }
  9
 10             /**
 11              * 判断长度
 12              * @param numb
 13              * @returns {string}
 14              * 返回2位
 15              */
 16             function is2length(numb) {
 17                 return numb.toString().length==2?numb:(0+‘‘+numb)
 18             }
 19
 20             /**
 21              * 转为整数
 22              * @param numb
 23              * @returns {Number}
 24              * 返回10进制
 25              */
 26             function getIntager(numb) {
 27                 return parseInt(numb,10)
 28             }
 29
 30             /**
 31              * 返回日期
 32              * @param arg
 33              * @returns {number}
 34              */
 35             function getDate(arg) {
 36                 var oneDay = 24*60*60*1000,
 37                     beforeAndAfer = arg*oneDay,
 38                     atLast = new Date().getTime() + beforeAndAfer
 39                 if(arguments[1]){
 40                     atLast = arguments[1].getTime() + beforeAndAfer
 41                 }
 42                 return new Date(atLast)
 43             }
 44
 45             /**
 46              * 渲染到页面:渲染日期
 47              * @param _parent
 48              * @param date
 49              * @param today
 50              */
 51             function setVal(_parent,date,today) {
 52                 if(arguments.length==4){
 53                     _parent.find(‘input‘).eq(1).val(getFormatData(date.monday))
 54                     _parent.find(‘input‘).eq(2).val(getFormatData(date.sunday))
 55                 }else{
 56                     _parent.find(‘input‘).eq(1).val(getFormatData(date))
 57                     _parent.find(‘input‘).eq(2).val(getFormatData(today?today:date))
 58                 }
 59             }
 60             function setValAndReqNow(arg){
 61                 //  今天周几
 62                 var isNow = new Date().getDay(),
 63                     //  通过今天计算出本周一对应的日期
 64                     monday = getDate(-getIntager(isNow)+1),
 65                     //  通过今天计算出本周天对应的日期
 66                     sunday = getDate(7-isNow),
 67                     diff = 0
 68                 switch (arg){
 69                     case 1 :    //  本周
 70                         monday = getDate(-getIntager(isNow)+1)
 71                         sunday = getDate(7-isNow)
 72                         break;
 73                     case 2 : //  下周
 74                         //  计算出周天离今天还有几天
 75                         diff = 7-getIntager(isNow)
 76                         //  计算出下周一日期
 77                         monday = getDate(diff+1)
 78                         //  计算出下周日日期
 79                         sunday = getDate(7+diff)
 80                         break;
 81                     case 3 : //  上周
 82                         //  计算出上周周天离今天还有几天
 83                         diff = getIntager(isNow)
 84                         //  计算出下周一日期
 85                         monday = getDate(-(6+diff))
 86                         //  计算出下周日日期
 87                         sunday = getDate(-diff)
 88                         break;
 89                     case 4 : //  本月
 90                         /*************************************************
 91                          * 月末计算规则:
 92                          * 获取当前月份然后得到下个月1号对应的时间戳减去一天的时间戳
 93                          *************************************************/
 94                         diff = getMonthMt()
 95                         //  获取下个月初
 96                         var end = getYearMt()+‘-‘+is2length((diff+1))+‘-01‘
 97                         //  获取下个月初
 98                         //  本月初
 99                         monday = getNowMonthFrist(diff)//new Date(getYearMt()+‘-‘+is2length((diff))+‘-01‘)
100                         //  本月末
101                         sunday = getDate(-1,getNowMonthEnd(diff+1))//getDate(-1,new Date(end))
102                         break;
103                     case 5 : //  上月
104                         diff = getMonthMt()
105                         //  获取下个月初
106                         //  上月初
107                         monday = getNowMonthFrist(diff-1,-1)
108                         //  上月月末
109                         sunday = getDate(-1,getNowMonthEnd(diff),-1)
110                         break;
111                     case 6 : //  下月
112                         diff = getMonthMt()
113                         //  获取下个月初
114                         //  下月初
115                         monday = getNowMonthFrist(diff+1,1)
116                         //  下月月末
117                         sunday = getDate(-1,getNowMonthEnd(diff+2),1)
118                         break;
119                 }
120                 /*************************************************
121                  * 本月日期区间计算规则:
122                  * ----本月一号减去一天的时间戳-----
123                  * 月末计算规则:
124                  * 获取当前月份然后得到下个月1号对应的时间戳减去一天的时间戳
125                  *************************************************/
126
127                 return{
128                     monday:monday,
129                     sunday:sunday
130                 }
131             }
132             //  获取当前月份
133             function getMonthMt() {
134                 return getIntager(new Date().getMonth())+1
135             }
136
137             /**
138              * 返回准确的年月,确保上查询上一月和下一月的时候年份和月份不合适
139              * @param month
140              * @returns {{thisMonth: number, year: number}}
141              */
142             function accurateYAndM(month) {
143                 var year = 0,
144                     thisMonth = 0
145                 if(month==0&&arguments[1]==-1){
146                     year = getYearMt()-1
147                     thisMonth = 12
148                 }else if(month==13&&arguments[1]==1){
149                     year = getYearMt()+1
150                     thisMonth = 1
151                 }else{
152                     year = getYearMt()
153                     thisMonth = month
154                 }
155                 return {
156                     thisMonth:thisMonth,
157                     year:year
158                 }
159             }
160             //  获取当前X月初日期
161             function getNowMonthFrist(month) {
162                 var yAndM = accurateYAndM(month)
163                 return new Date(yAndM.year+‘-‘+is2length(yAndM.thisMonth)+‘-01‘)
164             }
165             //  获取当前X月末日期
166             function getNowMonthEnd(month) {
167                 var yAndM = accurateYAndM(month)
168                 return new Date(yAndM.year+‘-‘+is2length(yAndM.thisMonth)+‘-01‘)
169             }
170             //  获取当前年份
171             function getYearMt() {
172                 return getIntager(new Date().getFullYear())
173             }

这里主要是贴出来JS代码,getDate()方法主要用于计算出往前几天或者往后几天的日期,要计算往后几天的日期就输入一个正整数,比如输入1,就返回明天的日期,输入-1就会返回昨天的日期

在setValAndReqNow()方法中也提供也星期的选择,有兴趣的或者有用到的小伙伴可以看看,当然了代码有很多需要优化的和改进的地方或者是我考虑不周到的地方希望大神们指点,本人小白一枚,欢迎吐槽,我比较喜欢在吐槽中进步
时间: 2024-12-27 11:31:53

JS日期区间选择和计算(一)技术篇的相关文章

JS日期区间选择和计算(一)吐槽篇

先来吐槽一把: 从一个坑跳到另一个坑,这就是it男的苦逼生活,不管是做前端还是后端,或许你在上家公司挖了坑,没准你在下家公司就入了坑了,入职新公司一个月时间(实际上还差一天),那么我们就开始聊聊这一个月我是怎么过来的 首先聊聊新公司的一些情况 是一家传统行业,虽然公司的规模很大,但是对于技术部来说却只有那么可怜楚楚的几个人,入职那天被假象所迷惑,好惨的,当时我是怎么想的,带我去面试的前台和我说他们的技术部在XX层,当时我就误以为一层都是前端,所以当时还挺心动的,和面试官了得也很开心,顺其发展一口

js按区间选择数据

var revenue = [350,450,550,650,850,1000,1100,1250,1500]; var reward = [0,30,40,50,100,200,240,300,400]; /* 根据指定的值,在revenue查找第一个比它大的值,返回对应的索引,通过索引在reward获取对应的奖励 1:如果值小于revenue最小的值时,则奖励0.所以reward前被了个0 2:如果值大于revenue最大的值时,则奖励最高一档 ***注意*** 前提是:revenue为整型

laydate.js 月份区间选择插件

laydate.render({ elem: '#reservation2' , type: 'month' , range: true, //format: '2018/09', theme: '#3c8dbc', value:'2018-09 - 2018-09', // value: time, done: function(value, startDate, endDate){ // 回调函数 console.log(value); console.log(startDate.year

js 日期比较大小,js判断日期是否在区间内,js判断时间段是否在另外一个时间段内

/** * 日期解析,字符串转日期 * @param dateString 可以为2017-02-16,2017/02/16,2017.02.16 * @returns {Date} 返回对应的日期对象 */ function dateParse(dateString){ var SEPARATOR_BAR = "-"; var SEPARATOR_SLASH = "/"; var SEPARATOR_DOT = "."; var dateArr

js 日期计算星座 根据生日的月份和日期,一行代码计算星座的js小函数(转)

本博客根据 开源中国作者清风徐不来 的文章 根据生日的月份和日期,一行代码计算星座的js小函数(转) 原文出自CSDN 无心的专栏 的文章,知识产权归原文作者所有! 点击查看原文:js 日期计算星座

原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org

js日期选择并将日期返回文本框

date.js // JavaScript Document var gMonths=new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"); var WeekDay=new Ar

[js开源组件开发]js手机联动选择日期 开源git

js手机联动选择日期 这里在前面的<js手机联动选择地区>的基础上,改造数据源之后形成的一个日期的选择器,当然你可以使用之前的PC上模式的<日期控件>,它同时也支持手机端,http://www.cnblogs.com/tianxiangbing/p/calendar.html. 效果图如下: mobile-select-date 手机联动选择日期 这个组件是从mobile-select-area 继承过来的,所以调用方法基本相同 DEMO请点击这里  http://www.love

自定义日历(四)-区间选择控件

目录 一.概述 二.效果展示 三.整体结构 四.分析实现 1.QPickDate 2.QDatePanel 3.QDateWidget.QDateContent 4. 调度绘制 五.相关文章 原文链接:自定义日历(四)-区间选择控件 一.概述 很早很早以前,写过几篇关于日历的文章,不同于Qt原生的控件,这些控件都是博主使用自绘的方式进行完成,因此可定制性更强一些,感兴趣的可以参考自定义日历(一).自定义日历(二)和自定义日历(三)). 本篇文章还是继续来写我们的日历控件,仍然采用自绘的方式,带来