<input type=”date”>の初期値を設定する方法【JavaScriptを使用】

ページを開いたときに、フォームの日付の初期値を設定するには、value属性を使います。

例えば、

<input type="date" value="2022-11-18">

のように記述すると、ブラウザ（Google Chrome）では以下のように表示されます。

右のカレンダーのアイコンをクリックすると、日付が選択できるようになります。

なお、注意点としては、『YYYY-MM-DD』の形式で入力する必要があります。

ただ、実用の面で考えると、特定の日付を入力するよりも、今日の日付になるように自動で変わるようにしたい人が多いでしょう。

そこでこの記事では、JavaScriptを用いて、<input type="date">のデフォルトの日付を今日に設定する方法を紹介していきます。

初期値を今日の日付にするためのコード
1. コードのポイント
2. （補足）翌日や昨日の日付にするのは簡単
侍テラコヤならいつでもプログラミングの質問が可能

初期値を今日の日付にするためのコード

以下のとおりです。

<!DOCTYPE html>
<html lang="ja">

<input type="date" id="today">

<script type="text/javascript">
  window.onload = function () {
    var today = new Date();
    today.setDate(today.getDate());
    var yyyy = today.getFullYear();
    var mm = ("0" + (today.getMonth() + 1)).slice(-2);
    var dd = ("0" + today.getDate()).slice(-2);
    document.getElementById("today").value = yyyy + '-' + mm + '-' + dd;
  }
</script>
</html>

コードのポイント

ポイントは、以下の4つです。

window.onloadにより、ページが開かれたときに実行される
getMonth()は0〜11までの整数値を取得するので、+1する必要がある
月は、01、02のように二桁にする必要があるので、0を先頭に付けた上で、右から2文字を取得するようにした
日付の形式は、『YYYY-MM-DD』である必要がある

（参考記事）input type=”date”を使った日付入力フォーム｜Qiita

（補足）翌日や昨日の日付にするのは簡単

getDate()+1と書くと翌日の日付に、-1なら昨日の日付になります。

たとえ月が変わっても、正常に表示されます（例えば、11/30 +1 → 12/1となります）。

以下は、翌日の日付に設定するためのサンプルコードです。

<!DOCTYPE html>
<html lang="ja">

<input type="date" id="tomorrow">

<script type="text/javascript">
  window.onload = function () {
    var tomorrow = new Date();
    today.setDate(tomorrow.getDate() + 1);
    var yyyy = tomorrow.getFullYear();
    var mm = ("0" + (tomorrow.getMonth() + 1)).slice(-2);
    var dd = ("0" + tomorrow.getDate()).slice(-2);
    document.getElementById("tomorrow").value = yyyy + '-' + mm + '-' + dd;
  }
</script>
</html>