如何在日历中禁用过去的日期？使用HTML0

问题描述：

如何使用以下html代码在日历中禁用以前的日期？如何在日历中禁用过去的日期？使用HTML0

 <div class="form-group"> 
    <label for="rank" class="cols-sm-2 control-label">Date</label> 
    <div class="cols-sm-10"> 
    <div class="input-group"> 
    <span class="input-group-addon"><i class="fa fa-calendar" aria-hidden="true"></i></span> 
    <input type="date" id="txtDate" required="Required" class="form-control" name="txtDate" placeholder="Select suitable date" /> 
    </div> 
    </div> 
     </div>

什么？什么日历？你还没有提供任何HTML。你甚至在问什么？ – Unlocked

我已通过添加代码编辑了我的问题。请检查它 – sikanderkhursheed

可能重复[禁用某些日期从html5 datepicker]（http://stackoverflow.com/questions/17182544/disable-certain-dates-from-html5-datepicker） –

答

问题here的答案与您要找的非常相似。简而言之，您可以在<input>上设置min属性，并且不会允许选择该最小值之前的日期。要动态地设置最小值，只需使用一些JavaScript，如下面的代码片段所示。

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

<div class="form-group"> 
 
    <label for="rank" class="cols-sm-2 control-label">Date</label> 
 
    <div class="cols-sm-10"> 
 
    <div class="input-group"> 
 
    <span class="input-group-addon"><i class="fa fa-calendar" aria-hidden="true"></i></span> 
 
    <input type="date" id="txtDate" required="Required" class="form-control" name="txtDate" placeholder="Select suitable date" /> 
 
    </div> 
 
    </div> 
 
</div>

谢谢很多杰克它解决了我的问题。赞赏 – sikanderkhursheed

如何在日历中禁用过去的日期？使用HTML0

相关推荐