HTML根据输入1自动更改日期输入2和输入3的值[关闭]答案

【问题标题】：HTML Auto change value of date input2 and input3 depending on input1 [closed]HTML根据输入1自动更改日期输入2和输入3的值[关闭]
【发布时间】：2013-05-29 00:09:57
【问题描述】：

我有 3 个日期输入：

<p>Bill 50%: <input type="date" name="bill50" /> </p>
<p>Bill 30%: <input type="date" name="bill30" /> </p>
<p>Bill 20%: <input type="date" name="bill20" /> </p>

我想知道如何更改bill30 和bill20 的值，使其自动将bill50 上的日期分别增加30 天和60 天。

我尝试在 PHP 中执行此操作无济于事，因为我对 JavaScript、AJAX 等完全是个菜鸟，当我提出愚蠢的问题时，请多多包涵。

【问题讨论】：

我对你在这里问什么感到有点困惑，抱歉。你能详细说明一下吗？例如，如果我在“bill30”输入框中输入一个值，你希望发生什么？
这可能很有趣：stackoverflow.com/questions/10705763/…
输入实际上是一个日期。它将显示一个日历以选择日期。选择日期后，我想显示 bill50 + 30 days to bill30 和 bill50 + 60 days to bill 20 的值。
@Alp 抱歉，您向我展示的链接是文本格式。尝试在jsfiddle 编辑它，但似乎对我不起作用。该链接显示了我的编辑。
你是对的。发布了一个应该满足您要求的答案。

标签： php javascript html forms date

【解决方案1】：

我在一些jQuery方法的帮助下做了一个例子：

DEMO

html:

<input type="date" id="fromDate" size="10"/>
<input type="date" id="toDate" size="10"/>

js:

$('#fromDate').on('change', function() {
    var date = new Date($(this).val());
    date.setDate(date.getDate()+20);
    $('#toDate').val(date.toJSON().slice(0,10));
});

说明

$('#fromDate') 选择第一个日期选择器
.on('change', function() { ... }) 在选择日期并执行回调函数时触发
在这个函数中$(this)指的是日期选择器元素
date.getDate()+20 将所选日期增加 20 天
date.setDate(...) 设置新日期
$('#toDate').val(...) 在第二个日期选择器上设置日期
您不能直接调用val(date)，因为date 看起来像这样："Tue Jun 04 2013 02:00:00 GMT+0200 (CEST)"
date.toJSON() 给我们："2013-06-04T00:00:00.000Z"
date.toJSON().slice(0,10) 给了我们前 10 个字符："2013-06-04"（这是日期输入所期望的格式）

【讨论】：

效果很好！现在我只需要研究它是如何工作的......为你+1。
我在我的帖子中添加了解释。有什么不懂的可以追问