javascript:<input type="date">の初期値に現在日付を設定する方法

自分で作っている時に少しハマったので、φ(..)メモメモ

<input type="date">の日付の設定について

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

HTML5で新しく追加された日付を入力するためのフォーム部品は、
時刻の形式を"yyyy-mm-dd"で設定しなければいけません。

なにも考えずに設定してしまうと・・・

しかし、下記のように何も考えずに月日を取得し、設定すると形式が合わずErrorとなってしまいます。。。

  var month = date.getMonth() + 1 // 返り値は、1 ~ 12
  var day = date.getDate() // 返り値は、1 ~ 31

※返り値が一桁となる場合、mmまたはddの形式とならない。

解決作

日付を取得した後に指定桁数にゼロ埋めしてあげる。
以下のサンプルでは、toTargetDigitsで対象(num)と何桁まで0埋めするか(digits)を指定し、
指定桁数まで文頭に'0'を追加しています。

サンプルソース

  var date = new Date()
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()

  var toTargetDigits = function (num, digits) {
    num += ''
    while (num.length < digits) {
      num = '0' + num
    }
    return num
  }
  
  var yyyy = toTargetDigits(year, 4)
  var mm = toTargetDigits(month, 2)
  var dd = toTargetDigits(day, 2)
  console.log(yyyy+'-'+mm+'-'+dd)

参考にさせて頂いたページ

tagamidaiki.com
qiita.com