2017-03-12 159 views
-1

如何使用以下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> 
+0

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

+0

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

+3

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

回答

0

问题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>

+0

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

相关问题