javascript - Javascript 添加年初至今并输入 html 输入

Question

在一个视图中，我有一个用户必须输入的日期。我想要的是其他日期自动填写一年+2年，另一年+5年。

感谢您的帮助。

html

<input type="date" th:field="*{date_fabrication}" class="form-control 
    col-xs-3 col" id="fabId"
        th:onblur="majdates()"
        th:errorclass="invalid"
        th:placeholder="#{fabricationEquipment}"
        style="width: 200px;font-size:12px;"
        required>

功能

<script>
    function majdates() {
        var recupDate = document.getElementById("fabId").value;
        var plusTwoYears = recupDate.setFullYear(date.getFullYear() + 2);
        document.getElementById("commissioningId").value = plusTwoYears;

    }
</script>

编辑：目标日期：

<input type="date" th:field="*{date_mise_en_service}" class="form-control col"
    id="commissioningId"
    th:errorclass="invalid"
    th:placeholder="#{commissioningEquipment}"
    style="width: 200px;font-size:12px;">

感谢Rory，下面的解决方案

<script>

document.querySelector('#fabId').addEventListener('blur', e => {
    var recupDate = new Date(e.target.value);
    var plusTwoYears = new 
Date(recupDate.setFullYear(recupDate.getFullYear() + 2));
    var formatedPlusTowYears =plusTwoYears.toISOString().slice(0,10);
    document.querySelector("#commissioningId").value = formatedPlusTowYears;
    document.querySelector("#volumeId").value = formatedPlusTowYears;
});
</script>

标签： javascripthtmljquery

Answer 1

您的代码几乎就在那里。主要问题是这recupDate将是一个字符串。您需要将其解析为 Date 对象才能调用setFullYear它。

另请注意，结果setFullYear()将是纪元时间戳，而不是日期，因此您将再次需要解析对 Date 对象的响应 - 并可能根据所需的输出手动格式化它。

document.querySelector('#fabId').addEventListener('blur', e => {
  var recupDate = new Date(e.target.value);  
  var plusTwoYears = new Date(recupDate.setFullYear(recupDate.getFullYear() + 2));
  document.querySelector("#commissioningId").value = plusTwoYears;
});

input {
  width: 200px;
  font-size: 12px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" class="form-control col-xs-3 col" id="fabId" required />

<input type="text" readonly id="commissioningId" />

最后，我还更改了逻辑以使用不显眼的事件处理程序而不是onblur属性，因为后者不再是好的做法。