我想将 Bootstrap 表单控件类添加到 Rails time_select 控件。我尝试了这个,但它不起作用。
<%= time_select :open_time, :prompt , :default => {:hour => '9', :minute => '30'} , class: "form-control" %>
最佳答案
在通读 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 选项是必要的。
我希望它有用!
关于css - 如何设置 rails time_select 字段的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43015487/