【JavaScript】input dateの特定曜日を選択できないようにする

WordPressのContact Form7で作成したフォームのなかに、このように↓HTML標準のinput type="date"で表示されるカレンダー日付選択があり、

ってなったので、

素のJavaScriptで「特定の曜日だけ」選択・送信できないようにする方法についてメモしておきます。

厳密には、

選択自体はできるものの、選択したらポップアップ警告が出て実質的に選択できないようにする

という手法になっています。

(特定曜日だけ指定してグレーアウトで選択自体できないようにする方法は分からなかった)

▼例

水曜を定休日として、水曜を選択するとこのようにブラウザ標準のポップアップで警告が出て、input欄にその日付がセットされない状態になります。

【JavaScript】input date型の特定曜日を選択不可にする

JavaScriptdocument.querySelector('#date').addEventListener('change', () => {
    let elem = document.querySelector('#date');
    let date = new Date(elem.value);
    let dayOfWeek = date.getDay()
    if (dayOfWeek === 3) { // 複数曜日なら、|| を使って併記していく
        alert("水曜日は休業日となります。選択しなおしてください。");
        elem.value = "";
    }
});

以下はご自分の環境に合わせて修正してください。

1. 1行目・2行目のinput type="date"要素を取得するCSSセレクター
2. 5行目の"3"
3. 6行目のポップアップ警告で表示されるメッセージ

以下、5行目に用いる曜日の早見表です。

これを適用して、以下2つを確認できれば成功です。

1. 特定曜日を選択したときだけ、ポップアップ警告が表示されること
2. 警告が表示されたあと、選択した日付が入力欄から消えていること

とくに、②を確認できないと意味がないので注意してください。

処理の最後でelem.value = "";が効いていないと、ポップアップ警告は出たものの、その日付で選択・送信できてしまうことになります。