向rails date_select helper添加标签

时间:2012-08-22 01:20:45

标签: html ruby-on-rails ruby forms accessibility

我正在对网站进行无障碍检修,并遇到了一个我不知道如何在Rails中解决的问题。代码如下:

<%= f.label :birthdate %>
<%= f.date_select :birthdate, {:start_year => Time.now.year - 14, :end_year => 1900, :prompt => true, :order => [:day, :month, :year]} %>

产生:

<label for="birthdate">Birthdate</label>
<select id="birthdate_3i" name="birthdate(3i)">
    <option value="">Day</option>
    <option value="1">1</option>
        ...
    <option value="31">31</option>
</select>
<select id="birthdate_2i" name="birthdate(2i)">
    <option value="">Month</option>
    <option value="1">January</option>
        ...
    <option value="12">December</option>
</select>
<select id="birthdate_1i" name="birthdate(1i)">
    <option value="">Year</option>
    <option value="1998">1998</option>
        ...
    <option value="1900">1900</option>
</select>

有没有人知道我是否必须为已生成的3个选择字段手动编写标签/字段集?或者我应该以不同方式使用rails代码。我对铁轨有点新意了......更像是一个前卫。

5 个答案:

答案 0 :(得分:1)

我最近在一个项目上遇到过这个问题,我们发现在Rails日期选择中每个select之前添加标签的唯一方法就是修补Rails。我们在Rails 5.1.4上。以下是构建月/日/年选择的原始方法,并在date_separator作为参数传递时,在最后2个选择之前放置一个分隔符:

https://github.com/rails/rails/blob/2c97fbf6503c9199f3fe5ed06222e7226dc6fcd9/actionview/lib/action_view/helpers/date_helper.rb#L1091

这是我们的猴子补丁,它使用正确的for标记在每个日期选择之前放置一个图例分隔符:

module ActionView
  module Helpers
    class DateTimeSelector

      # Given an ordering of datetime components, create the selection HTML
      # and join them with their appropriate separators.
      def build_selects_from_types(order)
        select = ""
        order.reverse_each do |type|
          separator = separator(type)
          select.insert(0, separator.to_s + send("select_#{type}").to_s)
        end
        select.html_safe
      end

      # Returns the separator for a given datetime component.
      def separator(type)
        return "" if @options[:use_hidden]
        field_name = "#{@options[:prefix]}_#{@options[:field_name]}"
        case type
          when :year
            "<label for='#{field_name}_1i'>Year</label>"
          when :month
            "<label for='#{field_name}_2i'>Month</label>"
          when :day
            "<label for='#{field_name}_3i'>Day</label>"
          when :hour
            (@options[:discard_year] && @options[:discard_day]) ? "" : @options[:datetime_separator]
          when :minute, :second
            @options[:"discard_#{type}"] ? "" : @options[:time_separator]
        end
      end
    end
  end
end

答案 1 :(得分:0)

date_select("DOB", :birthdate, :prompt => {
:day => 'Select day', :month => 'Select month', :year => 'Select year',
:start_year => Time.now.year - 14, :end_year => 1900
})

更多选项:
http://api.rubyonrails.org/classes/ActionView/Helpers/DateHelper.html#method-i-date_select

答案 2 :(得分:0)

我认为不可能生成单独的标签。即使你愿意为这个标签买单,也有一个额外的障碍,即它不是严格有效的HTML,因为没有“生日”形式控件。您是否应该在标签助手中使用:birthdate_3i?

答案 3 :(得分:0)

date_select包裹在divfieldset中。标签可以指向具有ID的任何内容,如果您有多个输入可以输入一种数据类型(与rails date_select一样),那么您可以标记容器,并让选择框成为它的组成部分。

<%= f.label :birthdate %>
<div id="birthdate">
  <%= f.date_select :birthdate, {:start_year => Time.now.year - 14, :end_year => 1900, :prompt => true, :order => [:day, :month, :year]} %>
</div>

答案 4 :(得分:0)

有一种方法不包括修补Rails。它仍然很hacky。这个想法是增加?|生成的选择标签。我们将使用Nokogiri来执行此操作(在Gemfile中需要date_select)。

下面的代码将gem 'nokogiri'添加到执行此操作的股票表单构建器中:

date_select_with_labels