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>

观察输入文本中的更改

1 个答案: