使用 javascript 根据 html 中输入的数字内部的变化更改日期输入的值

Question

我有一个 html 表单，其中包含“创建日期”日期输入、“月数”数字输入和“截止日期”只读日期输入。

基本上我想做的是当用户初始化“创建日期”的值然后继续更改“月数”的值时，“截止日期”将自动计算自己的时刻用户更改“月数”。

任何解决方案都会有很大帮助。非常感谢！

P.S。如果它很重要，我将使用 php 脚本将这些值发送到 mysql 服务器。

Answer 1

使用 vanilla JS 尝试如下所示的操作：

let dateCreated = document.getElementById("date-created");
let amtOfMonths = document.getElementById("amt-of-months");
let dueDateInput = document.getElementById("due-date");

dateCreated.onchange = function() {updateDueDate()};
amtOfMonths.onchange = function() {updateDueDate()};

function updateDueDate() {
  if (dateCreated.value && amtOfMonths.value) {
    let dueDate = addMonths(dateCreated.value, amtOfMonths.value);
    dueDateInput.value = dueDate.toLocaleDateString('en-CA');
  }
}

function addMonths(date, months) {
    let newDate = new Date(date);
    var day = newDate.getDate();
    newDate.setMonth(newDate.getMonth() + +months);
    if (newDate.getDate() != day)
        newDate.setDate(0);
    return newDate;
}

<label for="date-created">Date created</label><br>
<input type="date" name="date-created" id="date-created"><br><br>


<label for="amt-of-months">Amount of months</label><br>
<input type="number" name="amt-of-months" id="amt-of-months"><br><br>

<label for="due-date">Due date</label><br>
<input type="date" name="due-date" id="due-date">

在此示例中，我向 dateCreated 和 amtOfMonths 输入添加了一个 onchange 函数。在函数内部，我正在检查这两个输入是否都有值。如果两个输入都有值，则调用 addMonths 函数来计算 dueDate，并将其设置为 dueDateInput。

至于通过 PHP 发送到您的服务器，您可以在附加到包含您的输入的表单元素的 onsubmit 函数中执行此操作。

使用 javascript 根据 html 中输入的数字内部的变化更改日期输入的值

Changing value of date input based on change inside a number input in html using javascript

html

javascript

php

mysql

forms