Question

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

例如：

选择框1 - 日期：

prime_numbers = [2]

def prime_gen(upper_limit):
    for i in range(3, upper_limit, 2):
        if not any(i % j == 0 for j in range(2, i)):
            prime_numbers.append(i)

****选择方框2 - 小时:(从6:00到24:30）**** 循环只创建一个尚未通过的小时选项！例如，如果现在小时 21:00 ，则循环将仅显示 21：00,21：30,22：00等。

<select 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>

我的问题是：当用户选择＆＃34; Tomorrrow＆＃34;在第一个选择框中，它仍然显示今天未通过的小时数。这意味着用户只能在今天选择可用的小时数，即使他想在明天设置新的记录。

任何想法如何纠正它并允许＆＃34;明天＆＃34;以上用户选择一天中的任何一小时？

Answer 1

因为您使用＆＃34; javascript＆＃34;发布了您的问题标签，似乎很清楚，你希望答案也是javascript。所以我想知道你为什么用PHP创建你的选项，而你希望用javascript进一步改变它们。

另一个重要的一点是：使用PHP创建选项意味着您使用服务器的时间，而您的用户可能会有完全不同的一个！

所以它绝对必须是所有的javascript，IMO 我猜你对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>

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

Answer 2

这是一个完整的解决方案：

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

请注意：有很多方法可以实现这一点，我们不能说这是“解决方案”。可以找到许多其他（可能更好）的有一个工作示例here。

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

未来的日期选择

2 个答案: