html - 限制 HTML5 日期输入中的 future 日期

Question

我想限制用户只能在 HTML 日期输入中添加 future 日期。

我想添加 HTML5 日历而不是 jQuery UI 日期选择器。谁能告诉我如何限制 future 日期的输入？

Answer 1

您可以使用 HTML5 输入日期的 min 和 max 属性

HTML5代码

<input type="date" name="bday" min="2014-05-11" max="2014-05-20">

编辑

需要使用jQuery来实现

jQuery 代码

$(function(){
    var dtToday = new Date();

    var month = dtToday.getMonth() + 1;
    var day = dtToday.getDate();
    var year = dtToday.getFullYear();

    if(month < 10)
        month = '0' + month.toString();
    if(day < 10)
        day = '0' + day.toString();

    var maxDate = year + '-' + month + '-' + day;    
    $('#txtDate').attr('max', maxDate);
});

解释 HTML5 input date 的 max 属性需要两位数格式的月和日。

例如:5(月)无效，而 05(月)有效 例如:1(天)无效，而 01(天)有效

所以我添加了下面的代码

if(month < 10)
   month = '0' + month.toString();
if(day < 10)
   day = '0' + day.toString();

检查我更新的 fiddle

引用fiddle demo