HTML根据input1自动更改日期input2和input3的值

Question

我有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等喜欢的总菜鸟，所以当我提出愚蠢的问题时，请耐心等待。

Answer 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"（这是日期输入所需的格式）