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：我发现此页面上的方向可能正确：Source

我将代码调整如下：

            <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范围内。

因此，“编辑1”中的代码段起作用了。

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

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

0 个答案: