Javascript 未来日期选择

我正试图在我的网站上实现一个功能，允许用户向我的数据库中添加记录，并且在我的表单中，用户需要选择未来的日期

例如：

选择框1-日期：

****选择框2-时间：从6:00到24:30**** 循环仅创建一个小时的选项，但该时间尚未过去！ 例如，如果现在的小时是21:00，循环将仅显示21:00、21:30、22:00等

我的问题是： 当用户在第一个选择框中选择TomorRow时，仍然会显示今天未通过的小时数。 这意味着用户只能选择今天可用的小时数，即使他想为明天创造新的记录

---

有什么办法可以纠正它，让明天及以后的用户选择一天中的任何时间吗？

既然你用javascript标记发布了你的问题，那么很明显你也希望答案是javascript。所以我想知道为什么你用PHP创建了选项，而你却希望用javascript进一步修改它们

关于这一点的另一个重要观点是：使用PHP创建选项意味着您正在使用服务器的小时数，而您的用户可能有一个完全不同的小时数

因此，依我看，它肯定是全部javascript。 我猜你对JS并不缺乏经验，所以下面的建议只显示了可能使用的结构，不包括所有关于工作时间的精确信息，但是如果需要的话，请随时提问

<select id="startDay" name="startDay" class="form-control">
    <option value="Today">Today</option>
    <option value="Tomorrow">Tomorrow</option>
    <option value="In 2 days">In 2 days</option>
</select>
<select id="startHour" name="startHour" class="form-control">
</select>

<script>
$(document).ready(function() {
    $('#startDay').change(startDayChange)
    // prepare startHour from startDay default value when just loaded
    .change();
}
function startDayChange() {
    var minStartHour = new Date();
    if ($('#startDay').val() == "Today") {
        if (minStartHour.getMinutes() < 30) {
            minStartHour.setMinutes(30);
        } else {
            minStartHour.setHours(minStartHour.getHours() + 1);
            minStartHour.setMinutes(0);
        }
    } else {
        minStartHour.setHours(6);
        minStartHour.setMinutes(0);
    }
    // then work using minStartHour...
}
</script>

---

请注意，我们必须为标记添加id属性。

以下是一个完整的解决方案：

<select id="startDay" name="startDay" class="form-control">
    <option value="Today">Today</option>
    <option value="Tomorrow">Tomorrow</option>
    <option value="In 2 days">In 2 days</option>
</select>
<select id="startHour" name="startHour" class="form-control">
</select>

<script>
$(document).ready(function() {
    $('#startDay').change(startDayChange)
    // prepare startHour from startDay default value when just loaded
    .change();
});
function startDayChange() {
    // define minimum startHour depending on startDay:
    var minStartHour = new Date();
    if ($('#startDay').val() == "Today") {
        if (minStartHour.getMinutes() < 30) {
            minStartHour.setMinutes(30,0);
        } else {
            minStartHour.setHours(minStartHour.getHours() + 1);
            minStartHour.setMinutes(0,0);
        }
    } else {
        minStartHour.setHours(6,0,0);
    }
    // prepare bounds for allowed hours:
    var startHour = minStartHour,
        stopHour = new Date();
    stopHour.setHours(24,30);
    // generate options:
    $('#startHour').empty();
    while (startHour.getTime() < stopHour.getTime()) {
        $('#startHour').append(
            '<option>'
            + startHour.toString().match(/\d{2}:\d{2}/)
            + '<\/option>'
        );
        startHour.setTime(startHour.getTime() + 1800000);
    }
}
</script>

请注意：实现这一点的方法太多了，我们不能说这就是解决方案。我们还可以找到许多其他可能更好的方法。 有一个有效的例子

---

顺便说一句，对于这里的任何进一步的问题，请不要要求一个完全从头开始构建的解决方案：它超出了这个站点任务的范围，这是为了帮助解决您在编码时面临的特定问题，而不是为给定的最终用户需求提供完整的代码

为什么不使用element？type=date在Internet Explorer中不受支持。很抱歉，我并不关心IE，但如果你想很好地支持它，那就糟了。这是一个很大的工作，好luckI感谢你的帮助，但我仍然不知道如何用JS继续你的脚本，因为我真的没有JS方面的经验\：谢谢你，先生，但这甚至不是我现在构建的0.1%。此代码将帮助我练习JS。@Elirankohen。是的，当然这不是一个完整的应用程序！但我所说的最终用户需求代表了这样一个事实，即您希望答案从零开始就包括一般策略指导、适当的编码帮助、有关问题的解释，等等。。。请，请，每个问题只有一个主题！：-尽管如此，请随时提出其他问题，即使是关于同一个应用程序，但一次只能提出一个问题。无论如何，谢谢你接受了我的回答。

<select id="startDay" name="startDay" class="form-control">
    <option value="Today">Today</option>
    <option value="Tomorrow">Tomorrow</option>
    <option value="In 2 days">In 2 days</option>
</select>
<select id="startHour" name="startHour" class="form-control">
</select>

<script>
$(document).ready(function() {
    $('#startDay').change(startDayChange)
    // prepare startHour from startDay default value when just loaded
    .change();
}
function startDayChange() {
    var minStartHour = new Date();
    if ($('#startDay').val() == "Today") {
        if (minStartHour.getMinutes() < 30) {
            minStartHour.setMinutes(30);
        } else {
            minStartHour.setHours(minStartHour.getHours() + 1);
            minStartHour.setMinutes(0);
        }
    } else {
        minStartHour.setHours(6);
        minStartHour.setMinutes(0);
    }
    // then work using minStartHour...
}
</script>

<select id="startDay" name="startDay" class="form-control">
    <option value="Today">Today</option>
    <option value="Tomorrow">Tomorrow</option>
    <option value="In 2 days">In 2 days</option>
</select>
<select id="startHour" name="startHour" class="form-control">
</select>

<script>
$(document).ready(function() {
    $('#startDay').change(startDayChange)
    // prepare startHour from startDay default value when just loaded
    .change();
});
function startDayChange() {
    // define minimum startHour depending on startDay:
    var minStartHour = new Date();
    if ($('#startDay').val() == "Today") {
        if (minStartHour.getMinutes() < 30) {
            minStartHour.setMinutes(30,0);
        } else {
            minStartHour.setHours(minStartHour.getHours() + 1);
            minStartHour.setMinutes(0,0);
        }
    } else {
        minStartHour.setHours(6,0,0);
    }
    // prepare bounds for allowed hours:
    var startHour = minStartHour,
        stopHour = new Date();
    stopHour.setHours(24,30);
    // generate options:
    $('#startHour').empty();
    while (startHour.getTime() < stopHour.getTime()) {
        $('#startHour').append(
            '<option>'
            + startHour.toString().match(/\d{2}:\d{2}/)
            + '<\/option>'
        );
        startHour.setTime(startHour.getTime() + 1800000);
    }
}
</script>