[英]How to style rails time_select field?
I want to add bootstrap form-control class to rails time_select control.我想将 bootstrap form-control 类添加到 rails time_select 控件。 I try this but it doesnt work.我试试这个,但它不起作用。
<%= time_select :open_time, :prompt , :default => {:hour => '9', :minute => '30'} , class: "form-control" %>
The docs state: time_select(method, options = {}, html_options = {})
文档状态: time_select(method, options = {}, html_options = {})
So in your case: <%= time_select :open_time, { prompt: {hour: '9', minute: '30'} }, { class: 'form-control' } %>
所以在你的情况下: <%= time_select :open_time, { prompt: {hour: '9', minute: '30'} }, { class: 'form-control' } %>
Here is the time_select
method of rails.这里是 rails 的time_select
方法。
def time_select(object_name, method, options = {}, html_options = {})
Tags::TimeSelect.new(object_name, method, self, options, html_options).render
end
So, from the above method you can use html_options
for adding the html
attributes.因此,从上述方法中,您可以使用html_options
来添加html
属性。
So, your code becomes,所以,你的代码变成,
<%= time_select :open_time, :prompt , :default => {:hour => '9', :minute => '30'} , html_options: {class: "form-control"} %>
I was facing a similar challenge of styling time_select
with Bootstrap and after reading through the documentation I was able to have them work.我在使用 Bootstrap 样式化time_select
时遇到了类似的挑战,在阅读了文档后,我能够让它们工作。
I noticed that when using the form_helpers
there is somewhat a different way of working with the time_select
and below are the examples;我注意到,使用时form_helpers
有几分与不同的工作方式time_select
及以下的例子;
time_select
without form_helper
time_select
没有form_helper
情况下使用form_helper
The syntax is time_select(object_name, method, options = {}, html_options = {})
and it can be seen that HTML options is the 4th parameter so applying Bootstrap class(es) can only work when passed to the fourth parameter.语法是time_select(object_name, method, options = {}, html_options = {})
并且可以看出 HTML 选项是第四个参数,因此应用 Bootstrap 类只有在传递给第四个参数时才能起作用。
In this case, the actual implementation can be as below;在这种情况下,实际的实现可以如下;
<%= time_select("my_object", "my_method", {include_seconds: true, prompt: { hour: 'Choose hour', minute: 'Choose minute', second: 'Choose seconds' } }, {class: "form-control"} ) %>
It can clearly be seen that I used the curly braces **{}**
to group the various options together, if not, the HTML options will not render and will even throw an error because in this case your parameters passed are more than required of the method.可以清楚地看到,我用大括号**{}**
将不同的选项一起,如果没有,HTML选项将不会呈现,甚至会抛出一个错误,因为在这种情况下,通过您的参数超过需要的方法。 An example is a code below;一个例子是下面的代码;
<%= time_select("my_object", "my_method", include_seconds: true,
prompt: { hour: 'Choose hour', minute: 'Choose minute', second: 'Choose seconds' },
class: "form-control" ) %>
Attempt 1 will not render the HTML options because the time_select
method accepts only four parameters but we have passed five to it.尝试 1 不会呈现 HTML 选项,因为time_select
方法只接受四个参数,但我们已经向它传递了五个参数。
<%= time_select("my_object", "my_method",
prompt: { hour: 'Choose hour', minute: 'Choose minute', second: 'Choose seconds' },
class: "form-control" ) %>
Attempt 2 will still not render the HTML options though the number of parameters passed is up to four as required by the time_select
method because I have failed to group the 3rd and 4th parameters尽管按照time_select
方法的要求传递的参数数量最多为四个,但尝试 2 仍然不会呈现 HTML 选项,因为我未能对第 3 个和第 4 个参数进行分组
<%= time_select("my_object", "my_method",
{ prompt: { hour: 'Choose hour', minute: 'Choose minute', second: 'Choose seconds' } },
{class: "form-control" } ) %>
Attempt 3 will render the HTML options passed to the method.尝试 3 将呈现传递给该方法的 HTML 选项。 In trying several options of grouping the 3rd and 4th parameters, I noticed that grouping them with the **{}**
is important and the only way to avoid errors and non-rendering of HTML options.在尝试对第 3 个和第 4 个参数进行分组的多个选项时,我注意到将它们与**{}**
分组很重要,也是避免错误和不呈现 HTML 选项的唯一方法。
time_select
with form_helper
将time_select
与form_helper
time_select
使用I noticed that sometimes we are mistaken to differentiate between the two (when using time_select
with and without form_helper
.我注意到有时我们会错误地区分这两者(当使用time_select
和form_helper
。
Below is the syntax of the time_select
method if used with a form_helper
as indicated here in the documentation;下面是的语法time_select
如果与使用的方法form_helper
所示此处的文档中;
time_select(method, options = {}, html_options = {})
It can be seen that amongst the two ( time_select(object, method, options = {}, html_options = {} )
and time_select(method, option = {}, html_options = {}
) are not the same in terms of parameters to be passed to them.可以看出,两者( time_select(object, method, options = {}, html_options = {} )
和time_select(method, option = {}, html_options = {}
)在参数方面是不一样的传给他们。
The code block below is how I implemented it with a form_helper
;下面的代码块是我如何使用form_helper
实现它的;
<%= form.time_select :duration, {include_seconds: true,
prompt: { hour: 'Choose hour', minute: 'Choose minute', second: 'Choose seconds' }},
{class: "form-control"} %>
I tried answering this with explanations so we can clearly see the differences;我试着用解释来回答这个问题,这样我们就可以清楚地看到差异; because I first used the time_select
with a form_helper
, applied HTML options and it worked but I decided to read more about the time_select
method and I started noticing the differences hence my reason to share this piece.因为我第一次使用time_select
与form_helper
,应用HTML选项和它的工作,但我决定读更多关于time_select
方法,我开始注意到,因此差异我有理由分享这一块。
I realized that grouping the options in the method with *{}*
is necessary for the two to render HTML options.我意识到将方法中的选项与*{}*
分组对于两者呈现 HTML 选项是必要的。
I hope it serves a purpose!我希望它有一个目的!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.