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

Question

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

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

所以我正在尝试编写的功能之一是：

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

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

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

<script>
    $( "#id_start" ).change(function() {
        var start = new Date();
        var finish = new Date();
        var numberOfDays = document.getElementById('id_lenght').value;
        start = document.getElementById('id_start').value;
        finish.setdate(start.getDate()+document.getElementById('id_lenght'))
        $('#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 Date 输入类型（Firefox 或 IE 不支持）也只会在您拉取它的值时给您一个字符串。因此，您创建了一个新的 Date 对象，然后立即将其丢弃。

所以现在开始不是Date，而是string。在这一行：

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);

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

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