Insert one css class to select on Rails date_select

Question

I am using the method date_select to generate 3 html selects, day, month and year. But I need that each select has one class of CSS.

I have not found on documentation how to pass parameters to helper, I tried several ways and nothing.

Rails View:

<%= f.date_select :birthday, :order => [:day, :month, :year], :start_year => 1910, :end_year => 2012, :html => {:class => ['day', 'month', 'year']} %>

HTML output:

<select id="poll_user_birthday_3i" name="poll_user[birthday(3i)]">
<select id="poll_user_birthday_2i" name="poll_user[birthday(2i)]">
<select id="poll_user_birthday_1i" name="poll_user[birthday(1i)]">

HTML output like I do:

<select id="poll_user_birthday_3i" name="poll_user[birthday(3i)]" class="day">
<select id="poll_user_birthday_2i" name="poll_user[birthday(2i)]" class="month">
<select id="poll_user_birthday_1i" name="poll_user[birthday(1i)]" class="year">

Thanks!

Answer 1

They way I worked around this problem was with css

View

<span class="datetime"> <%= f.date_select :birthdate, :order => [:day, :month, :year], :start_year => 1910, :end_year => 2012 %></span>

CSS

.datetime select:nth-child(1){
  width: 130px;
  text-indent: 15px; 
}

.datetime select:nth-child(2) {
  width: 200px;
  text-indent: 5px;
}

.datetime select:nth-child(3) {
  width: 110px;
  text-indent: 15px;
}

Answer 2

Rails does now do exactly what OP wanted.

:with_css_classes - Set to true if you want assign different styles for 'select' tags. This option automatically set classes 'year', 'month', 'day', 'hour', 'minute' and 'second' for your 'select' tags.

Source

Answer 3

The date_select does not provide a way to pass different html options to each select unfortunately. The optional html_options parameter is applied to each of them.

You could use the separate helpers select_day select_hour and select_minute to compile your own.

That way you can pass separate classes to each one.

Answer 4

As per the rails documentation(http://api.rubyonrails.org/classes/ActionView/Helpers/DateHelper.html#method-i-date_select), the method definition is as like below.

date_select(object_name, method, options = {}, html_options = {})

Using the above options, you can specify your code as like below.

     <%= f.date_select :birthday, {:order => [:day, :month, :year], :start_year => 1910, :end_year => 2012}, {:class => 'common-class'} %>

The html options what you passed will be discarded since it is not followed as per the documentation and hence you cannot get any class applied within the date_select.

You can refer the following thread for more info.

How do I set the HTML options for collection_select in Rails?

Also, you need to write the individual helper method as lebreeze suggests and apply the above steps in order to get the exact output.

Hope it helps.