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

Question

我想将bootstrap form-control类添加到rails time_select控件。我试试这个，但它不起作用。

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

Answer 1

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

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

Answer 2

以下是rails的if a == b as! String { ...... } 方法。

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

Here is the reference

Answer 3

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

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

在没有 time_select 的情况下使用 form_helper

语法为 time_select(object_name, method, options = {}, html_options = {})，可以看出 HTML 选项是第 4 个参数，因此应用 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 个和第 4 个参数进行分组

尝试 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 选项是必要的。

我希望它能起到作用！