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

Question

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

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

因此，我试图编写的一个功能是：

当用户更改输入Start_date的值时
从输入字段中获取该日期
获取字段Length的值
更新输入"0"的值；结束日期"；具有（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对象，然后立即将其抛出。

所以现在启动不是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);

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

当然，您需要确保输入的格式是可接受的！有很多"日期选择器"选项（例如，jQueryUi有一个日期选择器），如果你只对支持Chrome感兴趣，它会很好地工作。