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

Question

我想将引导表单控件类添加到 rails time_select 控件。我试试这个，但它不起作用。

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

Answer 1

这里是rails的time_select方法。

def time_select(object_name, method, options = {}, html_options = {})
  Tags::TimeSelect.new(object_name, method, self, options, html_options).render
end

因此，通过上述方法，您可以使用html_options 来添加html 属性。

所以，你的代码变成了，

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

Here is the reference

Answer 2

docs 状态：time_select(method, options = {}, html_options = {})

所以在你的情况下：<%= time_select :open_time, { prompt: {hour: '9', minute: '30'} }, { class: 'form-control' } %>

Answer 3

我在使用 Bootstrap 设置 time_select 时遇到了类似的挑战，在阅读了 documentation 之后，我能够让它们工作。

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

使用 time_select 而不使用 form_helper

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

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

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

可以清楚的看到我用花括号**{}**把各个选项group放在一起，如果没有，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 方法所要求的四个，因为我未能将第三个和第四个参数分组 p>

尝试 3

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

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

使用time_select 和form_helper

我注意到有时我们会错误地区分两者（在使用 time_select 和 form_helper 时。

以下是time_select 方法的语法，如果与form_helper 一起使用，如文档中的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 方法的信息，我开始注意到这些差异，因此我有理由分享这篇文章。

重要

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

我希望它有一个目的！