Are you building a Rails application and need to allow users to select days of the week in a form? Rails 7 offers an elegant solution for that with the weekday_options_for_select method. In this article, we’ll explore how to use this method, along with detailing its options and providing practical examples to get you started.
What is weekday_options_for_select?
weekday_options_for_select is a handy method available in Rails 7 that simplifies the creation of selection elements (dropdowns) for days of the week in forms. It automatically generates a list of options with the names of the days of the week and their corresponding values, making it easy for users to select from.
Example Usage
To start off, let’s take a look at an example of integrating weekday_options_for_select into a Rails form:
1
2
3
4
5
6
<%= form_with(model: user) do |form| %>
<div class="field">
<%= form.label :work_day %>
<%= form.weekday_select :work_day, { selected: "Monday", day_format: :abbr_day_names } %>
</div>
<% end %>
This code would generate a dropdown with the days of the week, where the full names of the days are displayed and the corresponding values represent the days of the week from Sunday to Saturday.
1
2
3
4
5
6
7
8
9
10
11
12
<div class="field">
<label for="user_work_day">Work Day</label>
<select name="user[work_day]" id="user_work_day">
<option value="Sunday">Sun</option>
<option selected="selected" value="Monday">Mon</option>
<option value="Tuesday">Tue</option>
<option value="Wednesday">Wed</option>
<option value="Thursday">Thu</option>
<option value="Friday">Fri</option>
<option value="Saturday">Sat</option>
</select>
</div>
This HTML code represents the form output generated by the provided Ruby code. It includes a dropdown where users can select the day of the week, with “Mon” (Monday) preselected by default.
Customization with Options
In addition to the basic functionality, weekday_options_for_select offers additional options to customize its output. Here are some of them:
selected: Allows preselecting a day of the week. For example:
1
<%= select_tag 'day_of_week', weekday_options_for_select(selected: “Monday”) %>
1
2
3
4
5
6
7
8
9
<select name="day_of_week" id="day_of_week">
<option value="Sunday">Sunday</option>
<option selected="selected" value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
This would preselect “Monday” by default.
abbr_day_names: Allows customizing the abbreviations of the day names. For example:
1
<%= select_tag 'day_of_week', weekday_options_for_select(abbr_day_names: ['Sun', 'Mon', ...]) %>
1
2
3
4
5
<select name="day_of_week" id="day_of_week">
<option value="Sunday">Sun</option>
<option value="Monday">Mon</option>
<!-- Abbreviated day names continue for the rest of the days of the week -->
</select>
This would display “Sun”, “Mon”, etc., as the selection options.
index_as_value: Sets whether the indices of the day names should be used as values. For example:
1
<%= select_tag 'day_of_week', weekday_options_for_select(index_as_value: true) %>
1
2
3
4
5
6
7
8
9
<select name="day_of_week" id="day_of_week">
<option value="0">Sunday</option>
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
</select>
This would use the indices of the day names as values for the selection options.
day_format: Allows setting the format of the day names. For example:
1
<%= select_tag 'day_of_week', weekday_options_for_select(day_format: :abbreviated_day_names) %>
This would use abbreviated day names as the selection options.
beginning_of_week: Sets the first day of the week. For example:
1
<%= select_tag 'day_of_week', weekday_options_for_select(beginning_of_week: :sunday) %>
1
2
3
4
5
6
7
8
9
<select name="day_of_week" id="day_of_week">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
This would use Sunday as the first day of the week when generating the selection options.