在做项目的时候,有这样一个需求,需要选择时间段,于是在网上找了bootstrap的双日历时间控件daterangepicker控件,要选取时间段的年月来与后台进行数据交互,时间控件如下图所示:

关于控件的初始化在这里就不做介绍了,初始化完成后选择时间,点击确定按钮会触发控件的回调函数会把你选择的时间传给你,如图:start是选择的开始时间,end是选择的结束时间。在这里对start和end要做转换才可以使用。本身以为这样挺好的,满足了需求。后来在测试的过程中,发现当开始时间选择每月1日的时候,实际取的是选择的前一天,比如我选择的开始时间是4月1日,实际取得的是3月31日,导致获取的数据不一致。然后针对开始时间,针对项目的需求就需要对开始时间做处理,由于项目只需要传递年月,所以对这两个做处理,大致思路是这样:首先选择1日后,要看返回的前一天是31、30、29还是28,因为每年的1、3、5、7、8、10、12月是31天,而4、6、9、11月是30天,2月份要看当前年份是否是闰年,分为29天或28天。然后当返回日期是31或者30的时候,当月份是12月的时候还需要把年份加1,12月要变成01月,其他的是需要月份加1即可,最后当返回日期是29或28的时候,要判断是否是2月,因为这种情况下只有2月才需要改变月份,这里需要判断是否是闰年,因为闰年2月有29天,判断成立后直接把月份改成03。以上所描述的适用于开始时间是1日的情况。下面是我对于以上思路的实现:

//开始时间选择1号时处理
function specialDate(startArray){
if(startArray[2].substring(0,2)==31){
if(startArray[1]=="01" || startArray[1]=="03" || startArray[1]=="05" || startArray[1]=="07" || startArray[1]=="08" || startArray[1]=="10" || startArray[1]=="12"){
if(startArray[1]=="12"){
startArray[0] = parseInt(startArray[0])+1;
startArray[1]='01';
}else{
startArray[1] = parseInt(startArray[1])+1;
if(startArray[1]<10){
startArray[1] = '0'+startArray[1];
}
} }
}else if(startArray[2].substring(0,2)==30){
startArray[1] = parseInt(startArray[1])+1;
if(startArray[1]<10){
startArray[1] = '0'+startArray[1];
}
}else if(startArray[2].substring(0,2)==29 || startArray[2].substring(0,2)==28){
if(startArray[1] == 02){
//判断是否是闰年
if((startArray[0] % 4 == 0) && (startArray[0] % 100 != 0 || startArray[0] % 400 == 0)){
if(startArray[2].substring(0,2)==29){
startArray[1] = "03";
}
}else{
startArray[1] = "03";
} }
}
}

代码注释不多,有不懂或者不理解的欢迎留言~

bootstrap-daterangepicker双日历控件开始日期选择问题的更多相关文章

  1. 基于Bootstrap的日历控件和日期选择插件

    在线演示 本地下载

  2. BootStrap dateRangePicker时间范围控件

    BootStrap dateRangePicker时间范围控件 1 安装引用 1.1 下载zip Github:https://github.com/dangrossman/bootstrap-dat ...

  3. bootstrap的时间控件使用(双日历)

    这段时间看了下bootstrap的时间控件,发现使用起来还是很简单的,趁着有时间的时候整理了一下,方便自己以后忘记的时候查阅... 废话不多说先上效果图 接下来是代码实现 第一步当然是导入css.js ...

  4. Bootstrap 表单控件一(单行输入框input,下拉选择框select ,文本域textarea)

    单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...

  5. 背水一战 Windows 10 (44) - 控件(日期类): CalendarView, DatePicker, TimePicker

    [源码下载] 背水一战 Windows 10 (44) - 控件(日期类): CalendarView, DatePicker, TimePicker 作者:webabcd 介绍背水一战 Window ...

  6. asp.net+bootstrap上传图片+FileUpload控件文件上传下载

    ps:我数据库使用的pgsql,看个人修改. 代码asp.net 的,使用了mootools框架,里面包含了bootstrap上传图片,查看预览,还加了个上传任意文件的FileUpload.(界面随便 ...

  7. WPF进阶技巧和实战03-控件(4-基于范围的控件及日期控件)

    系列文章链接 WPF进阶技巧和实战01-小技巧 WPF进阶技巧和实战02-布局 WPF进阶技巧和实战03-控件(1-控件及内容控件) WPF进阶技巧和实战03-控件(2-特殊容器) WPF进阶技巧和实 ...

  8. CheckBoxList控件获取多选择,需要遍历

    CheckBoxList控件获取多选择,需要遍历,环境:vs2008 在页面上添加CheckBoxList控件,输入项值 a,b,c,d.然后添加按钮 Button2确定,如何获取CheckBoxLi ...

  9. bootstrap 表单控件 控件状态 控件大小 help-block

    bootstrap 表单控件 控件状态 控件大小 help-block <!DOCTYPE html> <html lang="en"> <head& ...

随机推荐

  1. 简述我理解的C#

    第一章:开发入门 一.基础知识    1.计算机语言发展进程:计算机语言大致经过了机器语言.汇编语言.高级语言三个阶段的发展历程. 汇编语言:使用助记符来替代机器指令机器语言这种反人类的设计,阻碍了软 ...

  2. MySQL行转列、列转行

    一.行转列 有如图所示的表,现在希望查询的结果将行转成列 建表语句如下: CREATE TABLE `TEST_TB_GRADE` ( `ID` int(10) NOT NULL AUTO_INCRE ...

  3. APP测试报告

    招标手机APP测试总结报告     作    者: 日    期: 2016-03-10 文档编号: 002 版    本: Ver 1.0 目   录 1.测试概述 1 1.1. 编写目的 1 1. ...

  4. 对yolo与fasterrcnn anchors的理解

    yolo: 通过聚类产生5个不同比例的anchors.最后一个特征层的输出(x,y,w,h)与这些不同比列的相乘,将网络层的输出转化为bbox(小尺寸),再通过(H,W)还原成原图大小.一共有5个bb ...

  5. 软工个人作业4——Alpha阶段个人总结

    一.个人总结 1.在alpha 结束之后, 每位同学写一篇个人博客, 总结自己的alpha 过程: 经过本次alpha阶段的冲刺,首先学到了很多,收获了很多,同时也蛮辛苦的.其实我觉得作为组员我有很认 ...

  6. 对于一个段错误(核心已转储)问题的解答,错误的英文翻译是segment fault(core dumped)

    笔者在学习ROS的时候遇到的这个问题,使用的系统是ubuntu16.04,ROS版本是kinetic,在运行小海龟程序的时候突然打不开海龟界面的程序节点turtlesim-node,四处寻找答案未果, ...

  7. 【译】如何编写“移动端优先”CSS

    原文链接:https://zellwk.com/blog/how-to-write-mobile-first-css/ 构建响应式网站是如今前端开发者的必备技能,当我们谈到响应式网站时,“移动端优先” ...

  8. L358 World Book Day

    World Book Day is celebrated by UNESCO and other related organisations every year on the 23rd of Apr ...

  9. 安装oracle11g client 【INS-30131】执行安装程序验证所需的初始设置失败的解决方法

    今天在服务器(操作系统windows server 2008R2)上安装Oracle11g 客户端,弹出“执行安装程序验证所需的初始设置失败”,如上图.网上找了一些方法,简单整理如下,仅供参考. 问题 ...

  10. 对接https数据(3des加密)

    private void checkThread() { Urls urls = new Urls(type);//根据唯一识别类型初始化参数,可根据实际情况修改此构造函数 //访问国家平台接口,取出 ...