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

阅读: 评论:0

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

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

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

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

<div class="form-group"><label class="col-sm-3 control-label">出生年月</label><div class="col-sm-9"><input type="date" class="form-control" placeholder="请输入出生年月"name="UserInfoFormMap.birthday" id="birthday" value="" max=""></div>
</div>

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

这肯定是不合理的

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

<div class="form-group"><label class="col-sm-3 control-label">出生年月</label><div class="col-sm-9"><input type="date" class="form-control" placeholder="请输入出生年月"name="UserInfoFormMap.birthday" id="birthday" value="" max="2018-6-28"></div>
</div>




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


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

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



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

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

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

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


F5刷新页面,欧克了!

希望能帮助到你

over




本文发布于:2024-02-05 07:01:41,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/170726902464227.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:日期   标签   时间   type   date
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23