javascript - HTML/PHP：如何在提交之前/之后进行日期验证。检查所选日期是否距离当前日期 +/-5 天

Question

我有一个时间跟踪网站，一些团队成员可以在其中输入他们每天花在不同任务上的时间。通常他们应该输入每天的时间，因此他们应该只能访问当天。

但是以防万一他们在某些情况下忘记输入时间，我还创建了一个日历日期选择器，他们可以在其中选择与当前日期不同的日期，这样他们就可以回到过去或将来添加所花费的时间与当天不同的一天。

我想将此限制在当天前 5 天和后 5 天。

因此，在下面的表格中，用户可以选择与当前日期不同的日期。我想检查它是否距当天 +/- 5 天，然后转到他们可以输入时间的页面，如果超过 +/- 5 天，则显示错误消息。

    <tr>
        <td>
            <div>Calendar:</div> 
        </td>
        <td>
            <form action = "enterTimeDD.php" method = "post" id="calendarID">
                <input type='text' class='datepicker' id='currentDay' name='currentDay' autocomplete='off'>
                <input type='submit' value='Go to' id='greensubmit'>
            </form>
        </td>
    </tr>

实现这种行为的最佳方法是什么？

编辑 1：我在此页面上发现了一些可能是正确的方向：来源

我将代码调整如下：

            <script>
                const calendarID = document.getElementById('calendarID');
                const currentDay = document.getElementById('currentDay');
                const greensubmit = document.getElementById('greensubmit');

                var minDate=new Date(), maxDate = new Date();

                minDate.setDate(minDate.getDate()-5); 
                maxDate.setDate(maxDate.getDate()+5);

                if (currentDay > minDate && currentDay < maxDate ){
                    greensubmit.disabled = false;
                }
                else{
                    greensubmit.disabled = true;
                }

                greensubmit.addEventListener('click', function (event) {
                    calendarID.submit();
                });

            </script>

但是现在，即使日期在 +/-5 天范围内，提交按钮也不起作用。有什么建议么？

编辑 2：我尝试硬编码日期只是为了测试代码是否有效。

与var testDate = new Date("2018-11-01");minDate 和 maxDate 相比，我无法更改为任何日期。这是正确的，因为日期在 +/- 5 范围之外。

与var testDate = new Date("2018-11-08");minDate 和 maxDate 相比，我可以更改为任何日期。这是正确的，因为日期在 +/- 5 范围内。

因此，Edit 1 中的一段代码有效。

我看到的问题是const currentDay = document.getElementById('currentDay');没有得到我用 datepicker 选择的日期，以便将它与 minDate 和 maxDate 进行比较。我不明白为什么。我被困在这一点上。

标签： javascriptphphtmlvalidationdate