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

Question

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

基本上我想要做的是当用户初始化“创建日期”的值然后继续更改“月数”的值时，“到期日”将在用户更改“月数”。

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

PS 如果它很重要，我将使用 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; }

 <input type="date" label="Date created" id="date-created"> <input type="number" label="Amount of months" id="amt-of-months"> <input type="date" label="Due date" id="due-date">

至于通过 PHP 发送到您的服务器，您可以在附加到包含您的输入的 onSubmit function 中执行此操作。