input type="date" で未来の特定の日付を選択不可にしたい

Question

input type="date" で過去の日付を選択不可にしたい
https://teratail.com/questions/355685

こちらの応用になると思います。

年末年始など、特定の日付を指定して、
その日付を選択不可にしたいです。

jqueryを用い、以下のコードで
過去の日付は選択不可になっています。

$(function () {
	var tomorrow = new Date();
	tomorrow.setDate(tomorrow.getDate() + 1);
	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;
	document.getElementById("tomorrow").min = 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);
});

Answer 1

ブラウザの標準機能だとカレンダーのカスタマイズがあまりできません
やれるとしても選んでだめならエラー表示くらいでしょうね

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const now=new Date();
  const today=`${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2,'0')}-${(now.getDate()).toString().padStart(2,'0')}`;
  d.setAttribute('min',today);
  d.addEventListener('change',()=>{
    if(new RegExp(d.dataset.disselectable).test(d.value)){
      d.value="";
      alert('not selectable');
    }
  });
});
</script>
<input type="date" id="d" data-disselectable="^2022-(11-29|11-30|12-01)$">

カレンダーの選択を制限したいなら適当なdatepickerを導入ください
ただしjQueryUIはすでにサポート終了しているのでおすすめできません

Comments

[ishikawa222]

ありがとうございます！
無理せず、datepickerを使います。