おはようございます。株式会社るーぷのコーダー、三木と申します。

やっと涼しい日が来たり来なかったりしはじめました。
3~4年ほど前から、涼しくなってくると我が家の玄関に設置されている電気メーターにアシナガバチがやってくるようになりました。
はじめのうちはビビリ散らかしていたのですが、「アシナガバチはおとなしい」
「10～11月に集まってくるアシナガバチはお爺ちゃんらしい。（調べたところ、役割を終えたオスの場合が多く巣作りしないとのこと。）」
と聞いたので、「ほな、えぇか。。。」と毎年放置してます。

虫が大の苦手なのですが、「怖い顔して意外とこいつは臆病らしい。」とか聞くと割と許しちゃいます私。

<input type=”date”>

さて今回は、日時が入力できる”<input type=”date”>”に、現在から○日後～○日後と制限をかける方法をご紹介します。

日付の入力欄が作成できる、<input type=”date”>。
クリックすると、日付が入力できます。

<input type=”date”>

更に、min属性を指定すると日付の最小値（○年○月○日”から”）、
max属性を指定すると最大値（○年○月○日”まで”）と、選択範囲を指定することができます。

<input type=”date” min=”2023-09-28″ max=”2023-11-28″>

“JavaScript/JQuery”で日付を現在の○日後から選択できるようにする。【初心者向け】

それでは本題に入ります。

以下、コードです。(初心者向けです。理由は、コードを書いた私が初心者だからです。)

HTML

<input type=”date”>

JavaScript(JQuery)

$(function(){

// input[type=”date”]のminとmaxを現在日時取得して指定
// min (現在の3日後)
var minD = new Date();// 現在日時取得
minD.setDate(minD.getDate() + 3);// 現在日時の日数+3して上書き
var minYear = minD.getFullYear();// 上書きしたので、年月日それぞれ取得
var minMonth = minD.getMonth() + 1;
if(minMonth < 10){// 2桁にしないといけないので 10未満なら頭に0を追加
var minMonth = ‘0’ + minMonth;
}
var minDate = minD.getDate();
if(minDate < 10){// 2桁にしないといけないので 10未満なら頭に0を追加
var minDate = ‘0’ + minDate;
}
var min = minYear + ‘-‘ + minMonth + ‘-‘ + minDate;// yyyy-mm-ddになるように
$(‘input[type=”date”]’).attr(‘min’, min);
// max (現在の30日後)
var maxD = new Date();// 現在日時取得
maxD.setDate(maxD.getDate() + 30);// 現在日時の日数+30して上書き
var maxYear = maxD.getFullYear();// 上書きしたので、年月日それぞれ取得
var maxMonth = maxD.getMonth() + 1;
if(maxMonth < 10){// 2桁にしないといけないので 10未満なら頭に0を追加
var maxMonth = ‘0’ + maxMonth;
}
var maxDate = maxD.getDate();
if(maxDate < 10){// 2桁にしないといけないので 10未満なら頭に0を追加
var maxDate = ‘0’ + maxDate;
}
var max = maxYear + ‘-‘ + maxMonth + ‘-‘ + maxDate;// yyyy-mm-ddになるように
$(‘input[type=”date”]’).attr(‘max’, max);
});

以下が流れになります。

  1. 現在時刻を取得する。

    var minD = new Date();

  2. .setDate()で年月日の”日”の部分を、「取得した現在時刻の”日”」+3にして、さっきの変数に上書き。

    minD.setDate(minD.getDate() + 3);

  3. +3して上書きしたので”年””月””日”それぞれ取得。ただし
    min=”2023-09-28″のように「年4桁」「月2桁」「日2桁」でなければいけないので、
    年は良いとして月と日は10未満の場合頭に0を追加する。

    var minYear = minD.getFullYear();

    var minMonth = minD.getMonth() + 1;

    if(minDate < 10){
    var minDate = ‘0’ + minDate;
    }

  4. min=”2023-09-28″のような形になるよう文字と変数をハイフンを継ぎ接ぎ。

    var min = minYear + ‘-‘ + minMonth + ‘-‘ + minDate;

  5. <input type=”date”>のmin属性と先程から頑張ったアレを指定。

    $(‘input[type=”date”]’).attr(‘min’, min);

  6. max属性も同様に…

参考サイト様

こちらを参考に仕上げました。ありがとうございます。

jQueryで日付や時刻を表示する方法【new Date()の使い方を解説】
https://web.skipjack.tokyo/javascript/jquery_date/#chapter-6

【JavaScript入門】日付の加算・減算方法まとめ(月またぎ/うるう年)
https://www.sejuku.net/blog/22925#index_id2

それでは、失礼いたします。


メルマガ登録