input type=date选择日期查询相应的数据

H5带来了许多新的特性，其中input type=date 就是其中之一。在Web开发中，难免不会遇到选择时间或者日期来查询相应的数据。

1.首先，这是我的input时间选择控件（部分浏览器是不支持的，我用的360浏览器）

<span>当日用电量:</span><input id="myDay" type="date"   name="time"  value="" >

其中id=“myDay”是我自己写的方法，以下是代码：

$(function(){
			var date=new Date();
			var year=date.getFullYear();
			var day=date.getDate();
			var month=date.getMonth();
		//格式化日，如果小于9，前面补0
			if(day<10){
				 day = "0" + day;
			}
			//格式化月，如果小于9，前面补0
			if(month<10){
				 month = "0" + (month + 1);
			}
			//拼装完整日期格式
			//var today = date.getFullYear()+"-"+(month)+"-"+(day) ;
			var myYue=(year)+"-"+(month);
			var myDay=(myYue)+"-"+(day);
			$("#myDay").val(myDay);
			$("#myYue").val(myYue);
			});

这段代码是为了，让时间控件默认为当前日期。

2.接下来就是绑定JQuery事件了。

我们给input type=date 标签绑定一个change事件（改变事件）。

 $("#myDay").change(function(){
          dateTime=$("#myDay").val();
      dayDataAjax("yesterDay");
            .......省略部分代码
      });

这里我是把ajax方法封装了的。

dateTime=$("#myDay").val(); 这个是非常重要的一段代码，把时间的改变值赋值给ajax的data值，返回给后台处理，通过时间查询到相应的数据再返回给页面

3.最后就是展示效果了。

谢谢观赏！推荐一下，我的群：789826996