カレンダーで過去の日付を無効にするにはどうすればよいですか？ HTML0を使用

Question

カレンダーの前の日付を次のHTMLコードを使用して無効にするにはどうすればよいですか？

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

Answer 1

質問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>