https://blog.csdn.net/qq_41402200/article/details/80849331

可以直接用日历插件，日历插件初始化的时候就可以设置这些限制的。

可以使用jQuery的datepicker插件，可以自由设置限制时间的

属性 描述
autocomplete 设置或返回 date 字段的 autocomplete 属性值。
autofocus 设置或返回 date 字段在页面加载后是否应自动获取焦点。
defaultValue 设置或返回 date 字段的默认值。
disabled 设置或返回 date 字段是否被禁用。
form 返回对包含 date 字段的表单的引用。
list 返回对包含 date 字段的 datalist 的引用。
max 设置或返回 date 字段的 max 属性值。
min 设置或返回 date 字段的 min 属性值。
name 设置或返回 date 字段的 name 属性值。
readOnly 设置或返回 date 字段是否是只读的。
required 设置或返回在提交表单之前是否必须填写 date 字段。
step 设置或返回 date 字段的 step 属性值。
type 返回 date 字段的表单元素类型。
value 设置或返回 date 字段的 value 属性值。

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

当日用电量:
其中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.最后就是展示效果了。

作者：程序猿_小天
来源：CSDN
原文：https://blog.csdn.net/u011798443/article/details/80443175
版权声明：本文为博主原创文章，转载请附上博文链接！