フロントの人の雑多メモ

<input type="date">で土日祝や特定の日付を選ばせない方法

<input type="date">で土日祝や特定の日付を選ばせない方法

フォームで日付を入力したい時に便利な<input type="date">

一瞬で実装できるので便利ですが､特定の日付を選択不可にしたりできません｡

例えばこのように､土日の色を薄くしたりできません｡

input type dateで土日を選ばせない

こういうことをする場合､本来であればjQueryUIの「Datepicker」などを用いるのが確実ですが
どうしても<input type="date">でやりたいんだ！って方のために代替案をご紹介します｡

ちなみに､jQuery UIのDatepickerを使った方法はこちらで紹介してます｡
(ただ､Datepickerを使っても､選ばせたくない日を入力できてしまうので本記事のような対応が必要です)

jQuery UIのDatepickerで土日祝や特定の日付を選ばせない方法

jQuery UIのDatepickerで土日祝や特定の日付を選ばせない方法

PR

結論

結論から言うと､選ばせないことはできないので
選んだ瞬間にアラートを出す方法しか無いと思います｡

土日祝を選んでみてください｡

それでは､サンプルコードのご紹介です｡

目次

土日を選ばせないサンプル

サンプル (土日を選んでみてください｡)

<input id="date" type="date">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
	//入力したとき
	$("#date").on("change", function(){
		//内容を取得
		let val = $(this).val();
		//整形
		let date = new Date(val);
		//曜日を取得 0=日 6=土
		let week = date.getDay();
		//土日または祝日のとき
		if(week == 0 || week == 6){
			//アラート
			alert("その日は選択できません｡");
			//inputを空に
			$(this).val("");
		}
	});
});
</script>

バニラなJavaScriptはこちら｡(開く)

<input id="date" type="date">

<script>
	//入力したとき
	document.getElementById("date").addEventListener("change", function(){
		//内容を取得
		let val = this.value;
		//整形
		let date = new Date(val);
		//曜日を取得 0=日 6=土
		let week = date.getDay();
		//土日または祝日のとき
		if(week == 0 || week == 6){
			//アラート
			alert("その日は選択できません｡");
			//inputを空に
			this.value = "";
		}
	});
</script>

入力された日付の曜日を取得し､日または土のときにアラートを出しています｡

.getDay()で曜日を取得すると､以下の数値が返ってくるので

[0:日, 1:月, 2:火, 3:水, 4:木, 5:金, 6:土]

土日を除きたい場合は if(week == 0 || week == 6) とします｡

例えばアラートを火曜日にしたい場合は､if文のところを下記のように修正してください｡

if(week == 2)
PR

土日祝を選ばせないサンプル

土日祝を選んでみてください｡

祝日を判定するために､こちらのライブラリをお借りします｡

japanese-holidays-js

このようにすると､祝日の場合､変数「holiday」に祝日の名前が｡
祝日じゃない場合はundefinedが入ります｡

<script src="https://cdn.rawgit.com/osamutake/japanese-holidays-js/v1.0.10/lib/japanese-holidays.min.js"></script>
<script>
let date = new Date();
let holiday = JapaneseHolidays.isHoliday(date);
</script>

これを使って土日祝を選ばせないサンプルを作ってみます｡

サンプルコード

<input id="date" type="date">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.rawgit.com/osamutake/japanese-holidays-js/v1.0.10/lib/japanese-holidays.min.js"></script>
<script>
$(function(){
	//入力したとき
	$("#date").on("change", function(){
		//内容を取得
		let val = $(this).val();
		//整形
		let date = new Date(val);
		//曜日を取得 0=日 6=土
		let week = date.getDay();
		//祝日かどうか(祝日名 or undefined)
		let holiday = JapaneseHolidays.isHoliday(date);
		//土日または祝日のとき
		if(week == 0 || week == 6 || holiday){
			//アラート
			alert("その日は選択できません｡");
			//inputを空に
			$(this).val("");
		}
	});
});
</script>

バニラなJavaScriptはこちら｡(開く)

<input id="date" type="date">

<script src="https://cdn.rawgit.com/osamutake/japanese-holidays-js/v1.0.10/lib/japanese-holidays.min.js"></script>
<script>
	//入力したとき
	document.getElementById("date").addEventListener("change", function(){
		//内容を取得
		let val = this.value;
		//整形
		let date = new Date(val);
		//曜日を取得 0=日 6=土
		let week = date.getDay();
		//祝日かどうか(祝日名 or undefined)
		let holiday = JapaneseHolidays.isHoliday(date);
		//土日または祝日のとき
		if(week == 0 || week == 6 || holiday){
			//アラート
			alert("その日は選択できません｡");
			//inputを空に
			this.value = "";
		}
	});
</script>

入力されたときに､その内容を取得｡

曜日とisHolidayの結果を用意し､日または土または祝日のときにアラートを出しています｡

例えばアラートを火曜日と祝日にしたい場合は､if文のところを下記のように修正してください｡

if(week == 2 || holiday)
PR

過去と土日祝を選ばせないサンプル

サンプル

<input id="date" type="date">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.rawgit.com/osamutake/japanese-holidays-js/v1.0.10/lib/japanese-holidays.min.js"></script>
<script>
$(function(){
	//今日をYYYY-MM-DD形式で返す関数
	function formatDate() {
		let dt = new Date();
		var y = dt.getFullYear();
		var m = ('00' + (dt.getMonth()+1)).slice(-2);
		var d = ('00' + dt.getDate()).slice(-2);
		return (y + '-' + m + '-' + d);
	}
	//min属性に今日の日付をセット
	$("#date").attr("min", formatDate());

	//入力したとき
	$("#date").on("change", function(){
		//内容を取得
		let val = $(this).val();
		//整形
		let date = new Date(val);
		//曜日を取得 0=日 6=土
		let week = date.getDay();
		//祝日かどうか(祝日名 or undefined)
		let holiday = JapaneseHolidays.isHoliday(date);
		//土日または祝日のとき
		if(week == 0 || week == 6 || holiday){
			//アラート
			alert("その日は選択できません｡");
			//inputを空に
			$(this).val("");
		}
	});
});
</script>

バニラなJavaScriptはこちら｡(開く)

<input id="date" type="date">

<script src="https://cdn.rawgit.com/osamutake/japanese-holidays-js/v1.0.10/lib/japanese-holidays.min.js"></script>
<script>
	//今日をYYYY-MM-DD形式で返す関数
	function formatDate() {
		let dt = new Date();
		var y = dt.getFullYear();
		var m = ('00' + (dt.getMonth()+1)).slice(-2);
		var d = ('00' + dt.getDate()).slice(-2);
		return (y + '-' + m + '-' + d);
	}
	//min属性に今日の日付をセット
	document.getElementById("date").setAttribute("min", formatDate());
	//入力したとき
	document.getElementById("date").addEventListener("change", function(){
		//内容を取得
		let val = this.value;
		//整形
		let date = new Date(val);
		//曜日を取得 0=日 6=土
		let week = date.getDay();
		//祝日かどうか(祝日名 or undefined)
		let holiday = JapaneseHolidays.isHoliday(date);
		//土日または祝日のとき
		if(week == 0 || week == 6 || holiday){
			//アラート
			alert("その日は選択できません｡");
			//inputを空に
			this.value = "";
		}
	});
</script>

今日をYYYY-MM-DD形式で取得し､min属性を設定します｡

<input id="date" type="date" min="2022-02-17">などとなり､過去は選択できなくなります｡

PR

特定の日付を選ばせないサンプル

サンプル (20日が定休日の例です｡20日を選んでみてください｡)

<input id="date" type="date">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
	//特定の日付をセット
	const off = ["0120", "0220", "0320", "0420", "0520", "0620", "0720", "0820", "0920", "1020", "1120", "1220"];

	//入力したとき
	$("#date").on("change", function(){
		//内容を取得
		let val = $(this).val();
		//整形
		let date = new Date(val);
		//選ばれた月を取得
		let month = date.getMonth() + 1;
		//選ばれた日を取得
		let day = date.getDate();

		//それぞれゼロ詰め「1」を「01」に
		month = ("0" + month).slice(-2);
		day = ("0" + day).slice(-2);

		//定休日の中に､選ばれた日付が含まれているとき
		if(off.indexOf(month + day) !== -1){
			//アラート
			alert("その日は選択できません｡");
			//inputを空に
			$(this).val("").blur();
		}
	});
});
</script>

バニラなJavaScriptはこちら｡(開く)

<input id="date" type="date">

<script>
	//特定の日付をセット
	const off = ["0120", "0220", "0320", "0420", "0520", "0620", "0720", "0820", "0920", "1020", "1120", "1220"];
	//入力したとき
	document.getElementById("date").addEventListener("change", function(){
		//内容を取得
		let val = this.value;
		//整形
		let date = new Date(val);
		//選ばれた月を取得
		let month = date.getMonth() + 1;
		//選ばれた日を取得
		let day = date.getDate();
		//それぞれゼロ詰め「1」を「01」に
		month = ("0" + month).slice(-2);
		day = ("0" + day).slice(-2);
		//定休日の中に､選ばれた日付が含まれているとき
		if(off.indexOf(month + day) !== -1){
			//アラート
			alert("その日は選択できません｡");
			//inputを空に
			this.value = "";
		}
	});
</script>

7行目で定休日の配列を作成しておきます｡

2/20なら"0220"､3/5なら"0305"のように､ゼロ詰めで記入します｡

選ばれた日付がその配列の中にあれば､アラートを出します｡

土日祝と特定の日付を選ばせないサンプル

今までの組み合わせです｡

土日祝か､20日を選択してみてください｡

<input id="date" type="date">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.rawgit.com/osamutake/japanese-holidays-js/v1.0.10/lib/japanese-holidays.min.js"></script>
<script>
$(function(){
	//特定の日付をセット
	const off = ["0120", "0220", "0320", "0420", "0520", "0620", "0720", "0820", "0920", "1020", "1120", "1220"];

	$("#date").on("change", function(){
		//内容を取得
		let val = $(this).val();
		//整形
		let date = new Date(val);
		//曜日を取得 0=日 6=土
		let week = date.getDay();
		//祝日かどうか(祝日名 or undefined)
		let holiday = JapaneseHolidays.isHoliday(date);
		//選ばれた月を取得
		let month = date.getMonth() + 1;
		//選ばれた日を取得
		let day = date.getDate();

		//月と日をゼロ詰め「1」を「01」に
		month = ("0" + month).slice(-2);
		day = ("0" + day).slice(-2);

		//土日祝または定休日の中に､選ばれた日付が含まれていればエラー
		if(week == 0 || week == 6 || holiday || off.indexOf(month + day) !== -1){
			//アラート
			alert("その日は選択できません｡");
			//inputを空に
			$(this).val("").blur();
		}
	});
});
</script>

バニラなJavaScriptはこちら｡(開く)

<input id="date" type="date">

<script src="https://cdn.rawgit.com/osamutake/japanese-holidays-js/v1.0.10/lib/japanese-holidays.min.js"></script>
<script>
	//特定の日付をセット
	const off = ["0120", "0220", "0320", "0420", "0520", "0620", "0720", "0820", "0920", "1020", "1120", "1220"];
	document.getElementById("date").addEventListener("change", function(){
		//内容を取得
		let val = this.value;
		//整形
		let date = new Date(val);
		//曜日を取得 0=日 6=土
		let week = date.getDay();
		//祝日かどうか(祝日名 or undefined)
		let holiday = JapaneseHolidays.isHoliday(date);
		//選ばれた月を取得
		let month = date.getMonth() + 1;
		//選ばれた日を取得
		let day = date.getDate();
		//月と日をゼロ詰め「1」を「01」に
		month = ("0" + month).slice(-2);
		day = ("0" + day).slice(-2);
		//土日祝または定休日の中に､選ばれた日付が含まれていればエラー
		if(week == 0 || week == 6 || holiday || off.indexOf(month + day) !== -1){
			//アラート
			alert("その日は選択できません｡");
			//inputを空に
			this.value = "";
		}
	});
</script>
PR

<input type="date">の属性

一応載せておきますが､読まなくてもいいです｡

<input type="date">では以下の3つの属性が使えます｡

max

受け付ける最も遅い(未来の)日付をyyyy-mm-ddで指定｡
min

受け付ける最も早い(過去の)日付をyyyy-mm-ddで指定｡
step

指定した日数の間隔で日付を指定できる｡

<input type="date"> - HTML: ハイパーテキストマークアップ言語 | MDN

例

例 : <input type="date" max="2025-05-17">

今日以前の日付を選択できます｡

→便利

例 : <input type="date" min="2025-05-17">

今日以降の日付を選択できます｡

→便利

例 : <input type="date" step="7">

1週間間隔で日付を選択できます｡

→なんか惜しいけど､いつ使うん？

PR

コメント

「できました！」などの報告もお待ちしております｡

  • #001

    匿名さん

    拝見させていただきました。

    土日のアラート表示、できました。

    ありがとうござます。

    例えば2月20日、3月5日など、複数日をお休みの日、として、日にちを指定することはできるのでしょうか？

  • #002

    オーナー

    報告ありがとうございます！

    (公開日からちょうど1年後のコメントで､ちょっと感動しております笑)

    確かに､特定の日付を選ばせないパターンも欲しいですよね｡

    追加しましたので､よければご利用ください👍

  • #003

    匿名さん

    神様っているんですね・・・

    そう思わずにいられません。

    ＞＞1年後のコメントで､ちょっと感動

    私は尋常じゃならざる感動をしています。

    そしてできました。

    ありがとうございます。

    金井様に今世紀最大の幸福が届きますようお祈り申し上げます。

    本当にありがとうございます。

  • #004

    オーナー

    できたようでよかったです！

  • #005

    匿名さん

    毎週、火曜日と木曜日を表示させて、他の日は色を薄くして、選択できないように出来ますか。

    今、それで悩んでます。

  • #006

    オーナー

    カレンダーの特定の日を薄くしたい ということですよね？

    <input type="date">ではそれができないので､アラートを出すしかない ということをこの記事で書いてます｡

    本記事の冒頭でも述べてますが､jQuery UIのDatepickerを使えばそれができますので､こちらの記事参考にしてみてください｡

内容を確認の上､個人情報などは省いて掲載させていただきます｡

お名前・メールアドレスも入力する

メールで返信がほしい場合に入力してください｡

頂いた個人情報は開示しません｡返信のためだけに利用いたします｡

直接送信されます｡確認の上､「送信」してください｡

お役に立てましたら応援をお待ちしております！
頂いた応援は子育てに活用させていただきます｡

OFUSEで応援を送る


または以下のボタンからなにか買って応援 (PR)

Amazon

楽天市場

Yahoo!ショッピング

Amazonのアソシエイトとして「けん」は適格販売により収入を得ています。

  1. HOME
  2. 「JS」記事一覧

シェア

Twitterでシェア Facebookでシェア LINEでシェア はてなブックマークでシェア

お役に立てましたら応援をお待ちしております！
頂いた応援は子育てに活用させていただきます｡

OFUSEで応援を送る