Question

有没有办法阻止用户从HTML5日历中选择过去的日期或如何在html5日历中隐藏过去的日期？我只需要用户选择当前日期或未来，而不是过去的日期你能帮我解决这个问题吗？我不想使用任何插件

<input id="start" type="date" data-date-inline-picker="true" class="form-control" name="date">

Answer 1

您可以将min值指定为今天的日期。日期必须采用ISO格式(yyyy-mm-dd)，如此

<input id="start" type="date" data-date-inline-picker="true" class="form-control" name="date" min="2018-01-06">

min和max属性必须是完整日期;没有办法指定“今天”或“+0”。要动态地执行此操作，您需要使用JavaScript或服务器端语言，如下所示：

var today = new Date().toISOString().split('T')[0];
document.getElementsByName("date")[0].setAttribute('min', today);

<input id="start" type="date" data-date-inline-picker="true" class="form-control" name="date" >

Answer 2

您需要使用javascript来执行此操作：

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1;
var yyyy = today.getFullYear();
 if(dd<10){
        dd='0'+dd
    } 
    if(mm<10){
        mm='0'+mm
    } 

today = yyyy+'-'+mm+'-'+dd;
document.getElementById("start").setAttribute("min", today);

<input id="start" type="date" data-date-inline-picker="true" class="form-control" name="date" min="">

禁用HTML5日历中的过去日期

2 个答案: