设置type='date'的input标签不能选择大于当前时间的日期

ゝ一纸荒年。 2022-05-21 03:41 278阅读 0赞

做项目时在用户信息中添加了 '出生年月' 这一字段

当时就直接就在页面上写了H5的新特征  input 标签  type='date'

写完之后我就寻思着用户的非法操作，比如选择一个大于当前时间的日期作为生日

这肯定是不合理的

于是我就设置了标签的max 属性，如下

![70][]

![70 1][]

结果F5刷新，设置倒是设置上去了，就是没效果

![70 2][]

依然可以选择大于我设置的 '2018-6-28'

结果没想到是因为，max中设置时间的话，小于10的数字，要用 ‘0’补齐，如下

![70 3][]

![70 4][]

可以看得出，大于我设置的 '2018-06-28' 已经不能被选择了 ！欧了\`

不过把程序写入死值，是不是显得不够专业

好，接下来贴一段js，来设置他能够动态的禁用大于当前时间的日期

$(function(){
           //得到当前时间
    	var date_now = new Date();
    	//得到当前年份
    	var year = date_now.getFullYear();
    	//得到当前月份
    	//注：
    	//  1：js中获取Date中的month时，会比当前月份少一个月，所以这里需要先加一
    	//  2: 判断当前月份是否小于10，如果小于，那么就在月份的前面加一个 '0' ， 如果大于，就显示当前月份
    	var month = date_now.getMonth()+1 < 10 ? "0"+(date_now.getMonth()+1) : (date_now.getMonth()+1);
    	//得到当前日子（多少号）
    	var date = date_now.getDate() < 10 ? "0"+date_now.getDate() : date_now.getDate();
    	//设置input标签的max属性
    	$("#birthday").attr("max",year+"-"+month+"-"+date);
    })

F5刷新页面，欧克了！

希望能帮助到你

over

[70]: /images/20220521/594133b5665a43209b500d58a98c75e0.png
[70 1]: /images/20220521/91f39b1618e144f0a1fa418fb94daaf7.png
[70 2]: /images/20220521/c83d9f4c575244a1946ac11a518ca5e2.png
[70 3]: /images/20220521/6d1b0795bcbb4f3cae842a09debe54e3.png
[70 4]: /images/20220521/d2eb8cc1f96549eda1acebe855f1edfa.png