JavaScript输出选定开始和结束日期的方法

本文说明了JavaScript输出所选开始和结束日期的方法。分享给大家参考，如下：

我们一直在用公司的报表工具做报表，报表中最常用的查询条件是开始日期和结束日期。

我懂一点html和js，所以想用html JavaScript来选择查询日期，做出相应的决策。

实现后，我觉得这个比较简单。N年前学的html和javascript终于投入使用，大家都可以开发网页了。

这段代码必须在谷歌的chrome浏览器中，日期选择才能有效果(代码中的输入元素Type属性值为HTML5元素，需要由支持HTML5的浏览器运行)

代码如下：

！DOCTYPE HTMLhtmlhead meta http-equiv=' content-type ' content=' charset=gbk '/meta script type=' text/JavaScript '函数query(){ var xx=document . getelementsbyname(' day ')；var s=for(var I=0；ixx.lengthi ) { if(xx[i]。tagName=='TD') s=s xx[i]。innerText//alert(xx[i]。innerText)；else { if(xx[i])。tagName=='INPUT') { s=xx[i]。价值；//由于没有选择日期，默认值为空字符串//if (xx [I]。value==null | | xx [I]。value=' undefined' | | xx [I]。value=='')//alert (xx [I]。值)；} } if(I % 2==1)s='；'；} var YY=document . getelementbyid(' sp ')；YY . innerhtml=s；//document . write(' abcdefghr ')；//alert(xx . length)；}/script/head body table tr TD name=' day '开始日期：输入类型=' date ' name=' day '/TD TD name=' day '结束日期：输入类型=' date ' name=' day '/TD tdinput type=' button ' value=' query ' onclick=' query()'//TD/tr TD span id=' sp '/span/TD/tr/table/body/html写完这段代码后，第一感觉就是javascript是一种区分大小写的编程语言。在我的印象中，VB和SQL是不区分大小写的，而其他的c#、java和python是区分大小写的。今天在编写js代码的时候，一个很大的坑就是定义的变量是小写的S，但是大写的S写出来了，用了5分钟发现总是报告一个错误：变量没有定义。

操作效果如下：

通过这个例子，我觉得我更了解js和html:

1.日期选择的输入在这里通过输入标签的type=date来实现。2.选择日期后，点击按钮，该按钮上的文字由输入类型=按钮的值属性实现。3.点击按钮后如何回应？编写onclick math=“处理函数”。4.如何编写这个onclick事件的响应函数？点击此处后，将输出所选日期。5.如何获取选定的日期？此处使用文档对象的getElementsByName函数来查找标签属性名称='day '的标签。6.找到这些标签后，我们在判断上遇到了麻烦。你可以用。标记内容的innerText(只有文本，没有其他标记)，以及。网页内容的innerHTML。此外，对于选定的日期值，可以使用。值属性来获取它。7.下一个问题是，如何区分标签内容和选择的日期值？您可以使用。标记名属性来判断，如果是INPUT，那么使用。值，如果是TD，则使用。innerText。8.如果没有选择日期，得到的值是多少？实验表明，返回的是一个空字符串，而不是null。如果变量s被初始化，s的值是未定义的。9.字符串的赋值可以使用=运算符，所以代码s=s xx可以改为s=xx，这是一种常见的书写方式。现在甚至支持sql语句。10.在代码中写if else语句真的很不方便。没有elseif或elif，但必须是else，然后写if -else。11.i%2==1这是因为I是0、1、2和3。当i=1时，变量s加分号，效果：起始日期： 2017年1月3日；结束日期：2017年1月19日；12.输出在哪里？这里，报告增加了一行：span label，name=sp，开始不会显示。当然，要把输出作为这个标签的内容，首先要找到标签。在这里，我们可以通过getElementById找到标签，然后把输出结果放进去。innerHTML。

PS:这里有一些比较实用的计算天数的在线工具，大家可以使用：

在线日期/天数计算器：http://tools.jb51.net/jisuanqi/date_jisuanqi

在线日期计算器/差异天数计算器：http://tools.jb51.net/jisuanqi/datecalc

在线日期和天数差异计算器：http://tools.jb51.net/jisuanqi/onlinedatejsq

在线天数计算器：http://tools.jb51.net/jisuanqi/datejsq

更多对JavaScript相关内容感兴趣的读者可以查看本网站专题：《JavaScript时间与日期操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、0103010。

希望本文对JavaScript编程有所帮助。