设置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 = 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




  • 30
    点赞
  • 56
    收藏
    觉得还不错? 一键收藏
  • 14
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值