javascript - 观察输入文本的变化

Question

我有一个日期选择器

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

这是我计算年龄的函数

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>