做项目时在用户信息中添加了 '出生年月' 这一字段
当时就直接就在页面上写了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'
扫描二维码关注公众号,回复:
2587349 查看本文章
结果没想到是因为,max中设置时间的话,小于10的数字,要用 ‘0’补齐,如下
可以看得出,大于我设置的 '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