【HTML/Javascript】 input="date"に現在の日付（今日の日付）を設定する

-HTML/Javascript- input="date"に現在の日付を設定する

日付フォームをよく使うので備忘録として

input='date'に現在の日付を設定する方法(HTML/Javascript)

(2017.11.12 追記あり)

f:id:jacklin8:20171107194438p:plain

input type = 'date'に初期値を設定する

input type = 'date'に初期値を設定したいときの日付フォーマットは <input type='date' value='2014-03-18'>です

YYYY-MM-DDの形式で入れると設定できます

input type = 'date'に現在日付を設定する

これを現在日付で入力する場合は以下のコードを設定

<script type="text/javascript">
    //今日の日時を表示
        window.onload = function () {
            //今日の日時を表示
            var date = new Date()
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var day = date.getDate()
          
            var toTwoDigits = function (num, digit) {
              num += ''
              if (num.length < digit) {
                num = '0' + num
              }
              return num
            }
            
            var yyyy = toTwoDigits(year, 4)
            var mm = toTwoDigits(month, 2)
            var dd = toTwoDigits(day, 2)
            var ymd = yyyy + "-" + mm + "-" + dd;
            
            document.getElementById("today").value = ymd;
        }
</script>

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

解説

注意点として値はYYYY-MM-DDの形式でないといけません。

    var dd = toTwoDigits(day, 2)

上記コードでtoTwoDigits関数を呼び出し引数に(day=今日の日、digit=2桁）

仮に今日の日付が1日だとすると、day=1,digitは変わらないので2を引数に関数を呼び出し、dayは二桁ではないので0を付け足してます

num+='' の部分でNumber型をString型に強制的に変換してます

分かりやすく書くと

    //numは年・月・日　digitはそれぞれの桁数
    var toTwoDigits = function (num, digit) {
    　//String型へ変換
      num += ''
      //今日の年月日がそれぞれの桁数より小さい場合0を頭に足す
      if (num.length < digit) {
        num = '0' + num
      }
      return num
    }