javascript HTML input dateのデフォルトを当日に設定＋今日以前選択不可設定

Every Qiita #22
のんびり独学初学者投稿 22日目
今回は・・・
HTMLのinput dateで初期値を当日に設定＋今日以前を選択できないように設定した時の備忘録です。

処理フローを考える

1. 当日の日付を取得
2. input dateの形式に変換（形式：YYYY-MM-DD)
   1. valueをjavascriptで出力
   2. minをjavascriptで出力

上記のフローを1つずつ分解して実装していきましょう！

1.当日の日付を取得

javascriptでDateオブジェクトを使うと当日の日時を取得できます。

date.js

 const today = new Date();

出力結果

Tue Jul 27 2021 13:45:38 GMT+0900 (日本標準時)

2.input dateの形式に変換

input dateのvalueはYYYY-MM-DDで出力されるので、javascriptで成形していきます。dateオブジェクトには年・月・日をそれぞれ取得できるメソッドがありますので順番に取得しreplace関数を使って整えていこうと思います。
replace関数は、第一引数に変換対象の文字列、第二引数に変換する文字列を配置します。

date.js

function dateFormat(today, format){
    format = format.replace("YYYY", today.getFullYear());
    format = format.replace("MM", ("0"+(today.getMonth() + 1)).slice(-2));
    format = format.replace("DD", ("0"+ today.getDate()).slice(-2));
    return format;
}

1. 独自関数の第二引数にYYYY-MM-DDを配置します。（formatで受け取っています）
2. getFullYearで年を4桁で取得し、YYYYを変換します。
3. getMonth + 1で月を取得します。
   1. 月は0〜11で出力されますので、+1をすれば正確な月を取得できます。
   2. 2桁で取得したいので0を前に付け、末尾から2文字を取得するようにします。
4. getDateで日付を取得します。上記と同様に2桁で取得できるようにします。

出力結果

2021-07-27

value・minをjavascriptで出力

最後に成形したデータを初期値と最小値に設定すれば完了です。

date.js

const data = dateFormat(new Date(),'YYYY-MM-DD');
const field = document.getElementById(dateに付与した任意ID);
field.value = data;
field.setAttribute("min", data);

関数を呼び出し、取得した要素のvalueとminを設定しています。

これで当日が初期値として認識され、以前の日付を選択できないようにできます。

date.js

 const today = new Date();
 function dateFormat(today, format){
    format = format.replace("YYYY", today.getFullYear());
    format = format.replace("MM", ("0"+(today.getMonth() + 1)).slice(-2));
    format = format.replace("DD", ("0"+ today.getDate()).slice(-2));
    return format;
 }
 const data = dateFormat(today,'YYYY-MM-DD');
 const field = document.getElementById(dateに付与した任意ID);
 field.value = data;
 field.setAttribute("min", data);