Every Qiita #22
のんびり独学初学者投稿 22日目
今回は・・・
HTMLのinput dateで初期値を当日に設定+今日以前を選択できないように設定した時の備忘録です。
###処理フローを考える
- 当日の日付を取得
- input dateの形式に変換(形式:YYYY-MM-DD)
- valueをjavascriptで出力
- 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;
}
- 独自関数の第二引数に
YYYY-MM-DD
を配置します。(formatで受け取っています) -
getFullYear
で年を4桁で取得し、YYYYを変換します。 -
getMonth + 1
で月を取得します。 - 月は0〜11で出力されますので、+1をすれば正確な月を取得できます。
- 2桁で取得したいので0を前に付け、末尾から2文字を取得するようにします。
-
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);