input标签type=“week“选择第几周

今天在做统计报表页面的时候，有一个问题。需要按照周条件搜索。

天月年原来都做过，直接type="date"然后format一下就行了。但是没弄过按周查询的。
就自己查资料，慢慢搞！

HTML5 拥有多个可供选取日期和时间的新输入类型：

date：选取日、月、年
month：选取月、年
week：选取周和年
time：选取时间（小时和分钟）
datetime-local：选取时间、日、月、年（本地时间）
datetime：选取时间、日、月、年（在有些浏览器内失效，选用datetime-local）

<input type="week" name="start_time" value="2020-W29" />

但是 Internet Explorer 或 Firefox 浏览器不支持使用 type=“week” 属性的 HTML 元素。

这个时间格式很奇怪，跟date类型的不一样。
2020-W29 表示2020年的第29周。不知道这个值传到后台该怎么解析去数据库中查询。

控制层获取到当前是第几周：

Calendar calendar = Calendar.getInstance();
// 这个时间用于页面回显
calendar.clear();
calendar.setTime(new Date());
calendar.setFirstDayOfWeek(Calendar.MONDAY);
System.out.println(calendar.get(Calendar.WEEK_OF_YEAR));  //获取到今天  是第几周

因为前段 value值是 “2020-W29” 这种类型。所以就需要获取到当前时间然后按照 yyyy 格式进行格式化然后再拼接成前段页面需要的数据。

然后就是关于，前段提交表单。后台接收到 week 数据之后。怎么获取到时间范围：

控制层接收到时间 “2020-W29” 然后按照W对字符串进行拆分
不能截取字符串，因为1-9周和10-54周的长度是不一样的。有可能会造成下标越界。所以拆分成字符串数组。

/*获取到这一周的星期一的日期
*/
Calendar calendar = Calendar.getInstance();
String[] split = week.split("W");
String weekStr = split[1];
int weekNum = Integer.parseInt(weekStr);
calendar.set(Calendar.DAY_OF_WEEK, Calendar.MONDAY);
String yearStr = this.dateUtil.dateToStr(new Date(), "yyyy");
calendar.set(Calendar.YEAR, Integer.parseInt(yearStr));   //今年是那一年
calendar.set(Calendar.WEEK_OF_YEAR, weekNum);
String stDate = this.dateUtil.dateToStr(calendar.getTime());
System.out.println(stDate);/*获取到这一周的星期日的日期
*/
calendar.clear();
calendar.set(Calendar.DAY_OF_WEEK, Calendar.MONDAY);
calendar.set(Calendar.YEAR, Integer.parseInt(yearStr));   //今年是那一年
calendar.set(Calendar.WEEK_OF_YEAR, weekNum);
calendar.add(Calendar.DAY_OF_WEEK, 6);
String edDate = this.dateUtil.dateToStr(calendar.getTime());
System.out.println(edDate);

这样就有一个时间范围了，可以按照时间范围去数据库中查询数据了。

因为是我边查资料边该代码边写的文章。可能会有点儿乱。等有空了再整理一下。

input标签type=“week“选择第几周相关推荐

表单input标签type属性详解
目标:详解表单input标签type属性常用的属性值一.input标签和它的type属性 PS:input 元素可以用来生成一个供用户输入数据的简单文本框. 在默认的情况下, 什么样的数据均可以输入 ...
uniapp的input标签 type=“number“在移动端打开键盘不能输入小数点问题
uniapp的input标签 type="number"在移动端打开键盘不能输入小数点问题下面展示一些内联代码片. // An highlighted block <in ...
Input标签type属性
撰写日期:2019年02月20日 html中有许多标签有多个属性,input标签就是其中一个. 属性值描述 button 生成按钮 radio 生成单选按钮 submit 生成提交按钮 text 生 ...
html表单input file,input标签type=file的文件上传
一,通过表单提交的方式该提交方式只是提交普通表单:对于file组所选中的文件内容是不上传的,因此需要设置:enctype属性 enctype="multipart/form-data&qu ...
input标签type为number时如何去除加减按钮效果
我们在使用input type = number 时只想输入数字时会出现如下图所示的效果显然这不是我们想要的只需要我们简单把css样式改变下即可 /* 谷歌 */input::-webkit- ...
前端笔记-thymeleaf获取及回显input标签type=radio
如下演示: 回显: 前端代码如下: <div class="form-group"><label>性别</label><br/>&l ...
前端笔记-thymeleaf获取及回显input标签type=time
前端效果如下: 设置的时候就是这样的前端代码如下: <div class="form-group"><label>开课时间</label>&l ...
前端笔记-thymeleaf获取及回显input标签type=date
这是前端回显的数据: 修改界面: 前端相关代码: <div class="form-group"><label>出生时间</label>< ...
修改 html file 文字,修改input标签type=file类型的文字
Apworks框架实战 Apworks框架实战(一):Apworks到底是什么? Apworks框架实战(二):开始使用 Apworks框架实战(三):单元测试与持续集成 Apworks框架实战(四) ...

input标签type=“week“选择第几周

input标签type=“week“选择第几周相关推荐

最新文章

热门文章