input type="date" で過去の日付を選択不可にしたい

Question

実装したいこと

今日から4日後の日付からしか、カレンダーを選択できないようにしたい。
例：今日8/23であれば8/26以降からカレンダーを選択できるようにしたい

#現状
初期値は4日後にできているが、今日の日付を選択することができてしまう

<tr>
 <th>配送希望日</th>
 <td>
  <label class="date">
   <input type="date" name="配送希望日" id="tomorrow"  />  
  </label>
 </td>
</tr>  

配送希望日の初期値を4日後に設定

$(function () {
    var tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate()+3); //今日から数えて4日後の日付を取得
    var yyyy = tomorrow.getFullYear();
    var mm = ("0"+(tomorrow.getMonth()+1)).slice(-2);
    var dd = ("0"+tomorrow.getDate()).slice(-2);
    document.getElementById("tomorrow").value=yyyy+'-'+mm+'-'+dd;
});

今日より過去の日付選択を不可

$(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 minDate= year + '-' + month + '-' + day;
    $('#tomorrow').attr('min', minDate);
});

どのように記述したら4日後より前を選択できないようにすることができますでしょうか？
よろしくお願いいたします。

Answer 1

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const d=new Date();
  d.setDate(d.getDate()+3);
  tomorrow.setAttribute("min",d.toISOString().substr(0,10));
});
</script>
<input type="date" name="配送希望日" id="tomorrow">  

Answer 2

    document.getElementById("tomorrow").value=yyyy+'-'+mm+'-'+dd;

この後に同じ値を document.getElementById("tomorrow").min にセットすれば良さそうです。

Comments

[nyanmarun]

ご回答いただきありがとうございます！
すみません、まだJavaScript勉強し始めたばかりで実際にどういったコードを書けばうまくいくのかがわからないので、document.getElementById("tomorrow").minをどのようにセットすると良いかについても教えていただけるととても嬉しいです、、

[int32_t]

行をコピーして「value」を「min」に変えればよいですよ。

[nyanmarun]

ありがとうございます！！！！
できました！！！！