范围内的简单表格时间输入

Question

所以我当前的时间输入是

= f.input :start_time, :as => :time, :minute_step => 5

但我想将用户可以选择的时间限制在 9:00 到 17:00 之间。我尝试了一个 :start 对象，但这不起作用，我在 time_select 帮助器中找不到任何东西。

Answer 1

您几乎可以肯定必须使用一些自定义 Javascript 来解决这个问题。

考虑以下安装更改处理程序并执行您尝试执行的操作的 jQuery 代码：

$("#game_start_time_4i, #game_start_time_5i").change(function() {
    var start_hour_element = $("#game_start_time_4i");
    var start_minute_element = $("#game_start_time_5i");
    var start_hour = start_hour_element.val();
    var start_minute = start_minute_element.val();

    if (start_hour < "09") {
        start_hour_element.val("09");
    } else if (start_hour >= "17") {
        start_hour_element.val("17");
        start_minute_element.val("00");
    }
});

您也可以使用 jQuery 来简单地禁用该范围之外的所有时间：

$("#game_start_time_4i").find('option').each(function() {
    var hour = +$(this).val();
    if (hour < 9 || hour > 17) {
        $(this).attr('disabled', 'disabled');
    }
});

由于这不允许像 17:30 这样的时间，因此您需要将它与上面的更改处理程序结合使用。

最后，你还可以使用 jQuery 删除范围之外的所有时间：

$("#game_start_time_4i").find('option').each(function() {
    var hour = $(this).val();
    if (hour < "09" || hour > "17") {
        $(this).remove();
    }
});

此方法还应与第一个代码块中的更改处理程序结合使用。

要找到时间选择元素的确切名称，您需要查看生成的 HTML 作为源代码。在我的例子中，我在一个名为“Game”的控制器上使用它，所以元素 ID 都以 game_ 为前缀；如果您使用FooController，您可以使用foo_start_time_4i 和foo_start_time_5i 作为您的元素ID。只要您确保更改您使用的每个 time_select 的标识符，您就可以在一个页面上拥有任意数量的这些。

注意：如果 Rails 更改命名约定，这可能会有点脆弱，但它绝对是获取基于范围的时间条目的可行方法。