2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-07-27

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

###処理フローを考える

  1. 当日の日付を取得
  2. input dateの形式に変換(形式:YYYY-MM-DD)
  3. valueをjavascriptで出力
  4. 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で月を取得します。
  4. 月は0〜11で出力されますので、+1をすれば正確な月を取得できます。
  5. 2桁で取得したいので0を前に付け、末尾から2文字を取得するようにします。
  6. 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を設定しています。

スクリーンショット 2021-07-27 14.08.18.png
これで当日が初期値として認識され、以前の日付を選択できないようにできます。

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);
2
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?