获取周日历/月日历input框选择的日期范围

html5提供了新的input标签类型，type=“week”,type=“month”，用来表示周日历和月日历。通过$(“选择器”).val();获取选择的日期。
但是在项目中，向后台获取数据的时候，是通过“起始-终止”日期范围来查询数据的，需要将从input框获取到的周/月份转换为一个起始日期和终止日期传递到后台。

月&周日历转化为起始-终止日期：

html代码：

<div id="time"><label for="month">月份选择</label><input type="month" id="selectorMonth"/><label for="week">周选择</label><input type="week" id="selectorWeek"/>
</div>
<button class="query" onclick="search()">查询</button>

js代码：

var startDate="";
var endDate="";
function DateRange(value){var year,week,date;var month;var s_month=["04","06","09","11"];var b_month=["01","03","05","07","08","10","12"];if ((/^(\d{4}-\d{2})$/).test(value)){                 //月份选择year = parseInt(value.substring(0, 4));month = value.substring(5, 7);startDate=year+"-"+month+"-"+"01";if(s_month.indexOf(month)>-1){ //小月endDate=year+"-"+month+"-"+"30";}else if(b_month.indexOf(month)>-1){ //大月endDate=year+"-"+month+"-"+"31";}else if(month=="02"){ //2月if(year%4!=0)endDate=year+"-"+month+"-"+"28";elseendDate=year+"-"+month+"-"+"29";}}else if (value.indexOf("W") != -1){           //周选择year = parseInt(value.substring(0, 4));week = parseInt(value.substring(6, 8));var days=week*7;var f=year+"-01-01";var first= new Date(f).getDay();//一年第一天周几var offset=first==1?0:first-1;//偏移var monthDays=(year%4==0)?[0,31,29,31,30,31,30,31,31,30,31,30,31]:[0,31,28,31,30,31,30,31,31,30,31,30,31]for(month=0;days>0;month++){days-=monthDays[month];}month-=1;days+=monthDays[month]-offset;//在原先理解的基础上算出的某一周最后一天,偏移后就是某一周最后一天的日期endDate=year+"-"+month+"-"+days;if(days-6>0)//起始日期是否同一个月days=days-6;else{days=6-days;if(month-1<1){ //回到上一年year-=1;month=12;}else month-=1;days=monthDays[month]-days;}startDate=year+"-"+month+"-"+days;}
}

调用：

function search(){DateRange($("#selectorMonth").val()); //获取月日历起始截止日期alert(startDate+"-"+endDate);DateRange($("#selectorWeek").val()); //获取周日历起始截止日期alert(startDate+"-"+endDate);
}

月日历思路比较简单，判断一下平闰年，在判断下月份大小就可以获得起止日期。
周日历麻烦一点，一开始的时候以为2020第1周的意思是从2020年1月1日起第一个周，也就是2020.01.01-2020.01.07
但是并不是，下图就是一个周日历截图，实际是指周一开始到周日结束算一周。
所以就要先判断这一年第一天（1月1号）是不是周一，如果是的话，就好办了，按照原先的理解计算就可以了。
如果不是的话，就在原先理解的基础上进行偏移，偏移量=这一年第一天的星期数-1，后面这一年的日期计算都要加上这个偏移量。

获取周日历/月日历input框选择的日期范围相关推荐

python爬取下拉列表数据_Python+selenium之获取文本值和下拉框选择数据
Python+selenium之获取文本值和下拉框选择数据一.结合实例进行描述 1. 实例如下所示: #新增标签操作 def func_labels(self): self.driver.find_ ...
C#根据当前时间获取周，月，季度，年度等时间段的起止时间
C#根据当前时间获取周,月,季度,年度等时间段的起止时间最近有个统计分布的需求,需要按统计本周,上周,本月,上月,本季度,上季度,本年度,上年度等时间统计分布趋势,所以这里就涉及到计算周,月,季度, ...
dual mysql 获取序列_MySQL获取周、月、天日期，生成排序号
常用MySQL生成时间序列 --生成最近七天的日期,不包括当天 SELECT @cdate := date_add(@cdate, interval - 1 day) as date FROM(SEL ...
php 点击文本框弹出时间,点击Input框弹出日期选项
点击text文本框弹出日期选择器 body{margin:0;padding:0;font:14px Verdana, Arial, sans-serif;line-height:200%;} #co ...
html输入框获取焦点,JavaScript 如何获取获得了焦点的 Input 框的 id？
首先获取带焦点的元素有很多种方式,比如: document.activeElement; 关于focus事件,弄清楚点击提交按钮,或者鼠标在其他元素上触发了点击,再或者一旦通过其他方式转移了input ...
利用element日期组件，封装季度组件，实现日、周、月、季度切换，默认禁用部分日期选择（附带：获取昨日、昨日所在周、昨日所在月、昨日所在季度等方法）
具体效果图下: 1. 季度组件封装,创建一个 quarterDate.vue文件  <template><div><el-popov ...
复选框遍历选中 php,jQuery的复选框选择并且获取值
这次给大家带来jQuery的复选框选择并且获取值,jQuery复选框选择并且获取值的注意事项有哪些,下面就是实战案例,一起来看一下. 一.checkbox选择在jQuery中,选中checkbox通 ...
Django之头像实时展示到input框、图片验证码、简单发邮件
一.以注册功能来看头像实时展示首先先来写一个简单的页面: <div class="container-fluid"><div class="row&q ...
js获取上一个月、下一个月
/*** 获取上一个月** @date 格式为yyyy-mm-dd的日期,如:2014-01-25*/function getPreMonth(date) {var arr = date.split( ...
获取自然月之前或者自然月之后的日期
1.获取n个月之前 /*** @author: yaoxueke* @description: 获取几个月前的日* @param date 日期* @param num 几个月* @return {* ...

获取周日历/月日历input框选择的日期范围

获取周日历/月日历input框选择的日期范围相关推荐

最新文章

热门文章