JavaScript实现HTML5日期选择与输出功能详解

JavaScript实现HTML5日期选择与输出功能详解

本文通过一个具体实例，展示如何利用JavaScript实现起始与结束日期的选择与输出功能，供读者参考学习。

在使用公司报表工具制作报表时，最常遇到的查询条件便是开始日期与结束日期。

鉴于掌握一定的HTML和JavaScript知识，尝试利用这两种技术实现日期选择功能及其相应的交互响应。

实现过程相对简单，验证了早年学习的HTML与JavaScript知识在实际开发中依然具有实用价值，表明网页开发并非遥不可及。

需要注意的是，该代码需在支持HTML5的浏览器（如Google Chrome）中运行，因为代码中input元素的Type属性值为date，这是HTML5新增的元素类型。

具体实现代码如下：

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="content-type" content="charset=gbk"></meta>
 <script type="text/javascript">
  function query()
  {
   var xx = document.getElementsByName("day");
   var s="";
   for (var i=0;i<xx.length ;i++ )
   {
    if(xx[i].tagName == 'TD')
     s= s + xx[i].innerText;
     //alert(xx[i].innerText);
    else
    {
     if(xx[i].tagName == 'INPUT')
     {
      s += xx[i].value;
      //由于没有选择日期，默认值是空串
      //if(xx[i].value == null || xx[i].value == 'Undefined' || xx[i].value == "")
      // alert(xx[i].value);
     }
    }
    if( i % 2 == 1)
     s+=";";
   }
   var yy = document.getElementById("sp");
   yy.innerHTML = s;
   //document.write("abcdefg<hr>");
   //alert(xx.length);
  }
 </script>
</head>
<body>
 <table>
  <tr>
   <td name="day">开始日期: <input type="date" name="day" /></td>
   <td name="day">结束日期：<input type="date" name="day" /></td>
   <td><input type="button" value="查 询" onclick="query()" />
   </td>
  </tr>
  <tr>
   <td><span id="sp"></span></td>
  </tr>
 </table>
</body>
</html>

JavaScript大小写敏感注意事项

编写代码过程中，深刻体会到JavaScript是一门区分大小写的语言。印象中VB和SQL不区分大小写，而C#、Java、Python等均区分大小写。此次编写JS代码时，因定义的变量名为小写s，却在后续使用中写成了大写S，导致报错“变量未定义”，耗时五分钟才排查出此问题。

运行效果如下图所示：

核心实现逻辑与DOM操作要点

通过此示例，对JavaScript与HTML的理解更加深入，具体要点如下：

1、日期输入通过input标签的type="date"属性实现。 2、按钮上的文字通过input type="button"的value属性设置。 3、响应按钮点击需编写onclick属性，指向处理函数。 4、点击按钮后，函数负责输出所选日期。 5、获取所选日期需利用document对象的getElementsByName函数，查找name="day"的标签。 6、获取标签内容时，若仅含文本可用.innerText，若含网页内容用.innerHTML；而获取所选日期的值则使用.value属性。 7、需同时获取标签内容与日期值时，可通过.tagName属性判断：若为INPUT，使用.value取值；若为TD，使用.innerText取值。 8、若未选择日期，获取到的value为空串而非null。若变量s已初始化，其值为Undefined。 9、字符串赋值可使用+=运算符，如s=s+xx可简写为s+=xx，这种写法在SQL语句中也已支持。 10、JavaScript中无elseif或elif，必须使用else后接if-else结构，书写略显不便。 11、表达式i%2 == 1用于判断i的值（0、1、2、3），当i=1时，在变量s中添加分号，效果如：开始日期: 2017-01-03;结束日期：2017-01-19; 12、输出结果存放于报表新增的一行span标签中，该标签name="sp"，初始不显示。通过getElementById找到该标签，将输出结果赋值给.innerHTML即可显示。

此外，推荐几款实用的天数计算在线工具：

在线日期/天数计算器： 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数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。