css - 如何设置 rails time_select 字段的样式？

Question

我想将 Bootstrap 表单控件类添加到 Rails time_select 控件。我尝试了这个，但它不起作用。

 <%= time_select :open_time, :prompt , :default => {:hour => '9', :minute => '30'} ,  class: "form-control" %>

Answer 1

在通读 documentation 之后，我面临着使用 Bootstrap 设置 time_select 样式的类似挑战。我能够让他们工作。

我注意到在使用 form_helpers 时，使用 time_select 的方式有些不同，下面是示例；

在没有form_helper的情况下使用time_select

语法是 time_select(object_name, method, options = {}, html_options = {}) 可以看出 HTML options 是第四个参数所以应用 Bootstrap 类只能传递给第四个参数时工作。

在这种情况下，实际实现可以如下；

<%= time_select("my_object", "my_method", {include_seconds: true, prompt: { hour: 'Choose hour', minute: 'Choose minute', second: 'Choose seconds' } }, {class: "form-control"} ) %>

可以清楚的看到我用大括号**{}**把各种选项分组在一起，如果没有，HTML选项将不会渲染甚至会抛出错误，因为在这种情况下，您传递的参数超出了方法的要求。一个例子是下面的代码；

尝试 1

<%= time_select("my_object", "my_method", include_seconds: true,
    prompt: { hour: 'Choose hour', minute: 'Choose minute', second: 'Choose seconds' }, 
    class: "form-control" ) %>

尝试 1 不会呈现 HTML 选项，因为 time_select 方法仅接受四个参数，但我们已将五个参数传递给它。

尝试 2

<%= time_select("my_object", "my_method",
    prompt: { hour: 'Choose hour', minute: 'Choose minute', second: 'Choose seconds' }, 
    class: "form-control" ) %>

尝试 2 仍然不会呈现 HTML 选项，尽管传递的参数数量最多为 time_select 方法所要求的四个，因为我未能将第三个和第四个参数分组

尝试 3

<%= time_select("my_object", "my_method", 
    { prompt: { hour: 'Choose hour', minute: 'Choose minute', second: 'Choose seconds' } }, 
    {class: "form-control" } ) %>

尝试 3 将呈现传递给该方法的 HTML 选项。在尝试对第三个和第四个参数进行分组的几个选项时，我注意到使用 **{}** 对它们进行分组很重要，也是避免错误和不呈现 HTML 选项的唯一方法。

将time_select与form_helper一起使用

我注意到有时我们错误地区分了两者(当使用 time_select 时有和没有 form_helper。

如果与 form_helper 一起使用，下面是 time_select 方法的语法，如 here 所示在文档中；

time_select(method, options = {}, html_options = {})

可以看出，两者之间(time_select(object, method, options = {}, html_options = {})和time_select(method, option = {}, html_options = {}) 在传递给它们的参数方面是不同的。

下面的代码块是我如何使用 form_helper 实现它的；

<%= form.time_select :duration, {include_seconds: true, 
    prompt: { hour: 'Choose hour', minute: 'Choose minute', second: 'Choose seconds' }}, 
    {class: "form-control"} %>

我为什么回答

我试着用解释来回答这个问题，这样我们就可以清楚地看到差异；因为我首先将 time_select 与 form_helper 一起使用，应用了 HTML 选项并且它起作用了，但我决定阅读更多关于 time_select 方法的信息，然后我开始注意到其中的差异，因此我有理由分享这篇文章。

重要

我意识到将方法中的选项与 *{}* 分组对于两者呈现 HTML 选项是必要的。

我希望它有用!