フォームに入力された日付から年齢を出力したい

Question

前提・実現したいこと

フォームAに生年月日が入力されたら、フォームBに年齢を自動入力される様にしたいです。

発生している問題

入力フォームから年、月、日をバラバラに取得する方法が分かりません。

該当のソースコード

<div class="form form07">
  <label for="customer_birthday" class="form_name">生年月日</label>
    <input id="customer_birthday" type="date" name="customer_birthday" class="form07_date">
    <input id="customer_old" type="text" name="customer_old"/>
    <span class="form_side">歳</span>

<script>
    //生年月日
const birthday = {
    year: 2000,
    month: 12,
    date: 25
  };

function getAge(birthday){

    //今日
    var today = new Date();
 
    //今年の誕生日
    var thisYearsBirthday = new Date(today.getFullYear(), birthday.month-1, birthday.date);
 
    //年齢
    var age = today.getFullYear() - birthday.year;

    if(today <script thisYearsBirthday){
        //今年まだ誕生日が来ていない
        age--;
    }

    return age;
}

console.log(getAge(birthday));

</script>
</div>

詳細

下記サイトよりjsのコードを拝借しました。
JavaScriptで誕生日から年齢を計算する

    //生年月日
const birthday = {
    year: 2000,
    month: 12,
    date: 25
  };

上記を変更さえできれば理想通りになると思われるのですが、安直な考えでしょうか。
不足事項がありましたら教えていただけますと幸いです。
よろしくお願いいたします。

Answer 1

<input type="date"というものがあるのですね、使ったことがありませんでした・・

https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/date

event.target.valueAsDateでDateとして扱うことができるようですので、次のようなコードを書いてみました。

<div class="form form07">
    <label for="customer_birthday" class="form_name">生年月日</label>
      <input id="customer_birthday" type="date" name="customer_birthday" class="form07_date">
      <input id="customer_old" type="text" name="customer_old"/>
      <span class="form_side">歳</span>
  
  <script>
      //生年月日
  const birthday = {
      year: 2000,
      month: 12,
      date: 25
    };
  
  function getAge(birthday){
  
      //今日
      var today = new Date();
   
      //今年の誕生日
      var thisYearsBirthday = new Date(today.getFullYear(), birthday.month-1, birthday.date);
   
      //年齢
      var age = today.getFullYear() - birthday.year;
  
      if(today < thisYearsBirthday){
          //今年まだ誕生日が来ていない
          age--;
      }
  
      return age;
  }
  
  console.log(getAge(birthday));

  // 追加したコード
  document.querySelector("#customer_birthday").addEventListener("change", (event) => {
    birthday.year = event.target.valueAsDate.getFullYear()
    birthday.month = event.target.valueAsDate.getMonth() + 1
    birthday.date = event.target.valueAsDate.getDate()
    const age = getAge(birthday)
    document.querySelector("#customer_old").value = age
  })
  // 追加したコード

  </script>
  </div>

Comments

[emma.]

動きました！ありがとうございます。
自分の考え方が安直すぎて恥ずかしい限りです。
１から１０まで教えていただき申し訳ありません。
とても勉強になりました。