观察输入文本的变化

Question

我有一个日期选择器

 <div class="form-group">
     <label for="date">Date</label>
     <input type="text" class="form-control" id="birthdate">
 </div>

我有一个输入文本，其中年龄是根据 datepicker 上选择的日期自动计算的

<div class="form-group">
    <label for="age">Age</label>
    <input type="text" class="form-control" id="age">
</div>

这是我计算年龄的函数

getAge: function() {
    let birthdate = oValidationManager.sDate.value;
    if (birthdate != '') {
        let age = moment().diff(birthdate,'years');
        oValidationManager.iAge.innerHTML = age;
    }
    return;
},

如何在用户选择生日后在年龄输入文本中显示年龄？我尝试使用事件监听器，例如 oninput，但它不起作用。

我正在使用pikaday datepicker

Answer 1

使用 Pikaday，您可以使用 onSelect 属性定义一个函数，该函数在所选日期更改时被调用。例如：

let picker = new Pikaday({
  field: document.getElementById("birthdate"),
  onSelect: (date) => {
    document.getElementById("age").value = new Date((new Date() - date)).getUTCFullYear() - 1970;
  }
});

<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">


 <div class="form-group">
     <label for="date">Date</label>
     <input type="text" class="form-control" id="birthdate">
 </div>
<div class="form-group">
    <label for="age">Age</label>
    <input type="text" class="form-control" id="age">
</div>