JavaScriptでフォームのデフォルトの日付を今日にする

プログラミング

ページを開いたときに、フォームの日付が今日になるようにする方法です。

スポンサーリンク

実際のコード

<!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>

上記のコードを.html形式のファイルとして保存し、ブラウザにドラッグ&ドロップすると、日付を選択できるフォームが表示されます。

また、右のカレンダーのアイコンをクリックすると、カレンダーが表示され、任意の日付を選択できます。

コードのポイント

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

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