How to style rails time_select field?

Question

I want to add bootstrap form-control class to rails time_select control. I try this but it doesnt work.

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

Answer 1

The docs state: time_select(method, options = {}, html_options = {})

So in your case: <%= time_select :open_time, { prompt: {hour: '9', minute: '30'} }, { class: 'form-control' } %>

Answer 2

Here is the time_select method of rails.

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.

So, your code becomes,

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

Here is the reference

Answer 3

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.

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;

Using time_select without 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.

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. An example is a code below;

Attemp 1

<%= 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.

Attempt 2

<%= 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

Attempt 3

<%= 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. 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.

Using time_select with form_helper

I noticed that sometimes we are mistaken to differentiate between the two (when using time_select with and without 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(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.

The code block below is how I implemented it with a form_helper ;

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

Why I Answered

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.

Important

I realized that grouping the options in the method with *{}* is necessary for the two to render HTML options.

I hope it serves a purpose!