当开始日期更改时 JavaScript 更新结束日期

Question

对于我正在开发的网站，我使用表单来更新模型的不同字段。

其中一些字段需要根据其他字段的值进行更新。例如，任务的每个实例都有开始日期、结束日期和长度，必须验证以下内容:End = Start + Length(其中周末不计算在内，但次要问题)。

所以我尝试编写的函数之一可以:

When the user changes the value of the input Start_date
Get that date from the input field
Get the value of the field Length
Update the value of the input "End date" with (Start_date + Length)

我的示例涉及的三个输入具有以下 ID:id_start、id_length、id_finish。

这是我写的，但根本不起作用(没有任何可见的事情发生......):

<script>
    $( "#id_start" ).change(function() {
        var start = new Date();
        var finish = new Date();
        var numberOfDays = document.getElementById('id_length').value;
        start = document.getElementById('id_start').value;
        finish.setdate(start.getDate()+document.getElementById('id_length'))
        $('#id_finish').val(finish);
    });
</script>

任何有关使其发挥作用的解决方案的提示都将受到极大的赞赏。

Answer 1

让我们看看您的代码实际上在做什么。

var start = new Date();

在这里创建一个新的Date对象。

start = document.getElementById('id_start').value;

在这里，您将 start 的值更改为 id = 'id_start' 的 DOM 元素的值。问题是，这个值不是 Date 对象。即使是新的 HTML 日期输入类型(Firefox 或 IE 不支持)也只会在您提取其值时为您提供一个字符串。因此，您创建了一个新的 Date 对象，然后立即将其丢弃。

所以现在开始不是一个日期，而是一个字符串。在这一行中:

finish.setdate(start.getDate()+document.getElementById('id_lenght'))

您尝试在字符串对象上调用未定义的.getDate()，因此您会收到错误。

这是您需要执行的操作。该字符串(假设采用 ISO 格式:YYYY-MM-DD 或 YYYY-MM-DDTHH:MM:SS)可用于创建新的日期。

start = new Date(document.getElementById('id_start').value);

现在开始实际上是一个日期对象，您可以添加以天为单位的长度来获取结束日期。

当然，您需要确保输入的格式可接受!有很多“日期选择器”选项(例如 jQueryUi，有一个日期选择器)，如果您只对支持 Chrome 感兴趣，那么它效果很好。