date_select_separator 0.0.6 → 0.0.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 140046bd4a139bea58c7a6ca9f0e438d088ac2fd
-  data.tar.gz: 08fd82cfa1da9880159f5ffcc00686a126298ef3
+  metadata.gz: 5bddcd7a558ebc3bae63f3cc4090619028af6191
+  data.tar.gz: 47cb9da0d7a6c261f12e19ded1f50e600cb9cf9e
 SHA512:
-  metadata.gz: d52478807677174dbeb14733cd689811d7649748e04ff89ae83fcf21e52a389b221b85a3c25ecd52990988d480fae7ecd726b606d2ad152368b5b6c79b7965b0
-  data.tar.gz: 97c793ffc5d3f37cb1bb407b898aaee8ddd927622c340858e700976cdf33ea35dad8a5266e9de0e751fb92e740e9025f742a250df1aa25e16aa28ed9a83690f4
+  metadata.gz: 31f38d0a1c2badfb971bbb80fabfb562c324f022646ae22d6c2897b4561bd3f50f9f9568e7421c74335993bef4d84c6f9da0c455f4004295f690380d2f605060
+  data.tar.gz: 22b7f3a8f57670694df17ef35cf955b6d80820efdc43098c90e29394f55ce0dd5f214d0a24dc38fedd05a1ab28b54a70449f10d306a0e794753cf2b4fe4fad3d

data/README.md

@@ -39,9 +39,11 @@ Add `use_separators: true` option to data_select or datetime_select.
     <%= f.date_select :birthday, use_separators: { inline: true } %>
     <%= f.datetime_select :birthday, time_separator: '', use_separators: { inline: true } %>
 
-    # Options: html_tag, class_prefix etc
+    # Options: html_tag, class_prefix, translations, wrapper_select_tag etc
     <%= f.date_select :birthday, use_month_numbers: true, use_separators: { html_tag: :div, class_prefix: 'foo' } %>
     <%= f.date_select :birthday, use_month_numbers: true, use_separators: { year: 'yy', month: 'mm', day: 'dd' } %>
+    <%= f.date_select :birthday, use_month_numbers: true, use_separators: { wrapper_select_tag: true } %>
+    <%= f.date_select :birthday, use_month_numbers: true, use_separators: { wrapper_select_tag: { html_tag: :span, class_prefix: 'foo_' }} %>
 
 ## Contributing
 

data/lib/date_select_separator/action_view_extension.rb

@@ -4,11 +4,18 @@ module DateSelectSeparator
 
     included do
       def select_month_with_separator
-        separators = @options[:use_separators]
+        type = :month
+        separator_options = @options[:use_separators]
         select_tag = select_month_without_separator
 
-        if use_separators?(:month, separators) && !inline_separator?(separators)
-          select_tag << separator_tag(:month, separators)
+        if use_separators?(type, separator_options)
+          unless inline_separator?(separator_options)
+            select_tag << separator_tag(type, separator_options)
+          end
+
+          if use_wrapper_select_tag?(separator_options)
+            select_tag = wrapper_select_tag(select_tag, type, separator_options)
+          end
         end
 
         select_tag
@@ -16,44 +23,64 @@ module DateSelectSeparator
       alias_method_chain :select_month, :separator
 
       private
-      def use_separators?(type, separators)
+      def use_separators?(type, separator_options)
         discard_type = "discard_#{type}".to_sym
-        !@options[:use_hidden] && !@options[discard_type] && separators
+        !@options[:use_hidden] && !@options[discard_type] && separator_options
+      end
+
+      def inline_separator?(separator_options)
+        separator_options.is_a?(Hash) && separator_options[:inline]
       end
 
-      def inline_separator?(separators)
-        separators.is_a?(Hash) && separators[:inline]
+      def use_wrapper_select_tag?(separator_options)
+        separator_options.is_a?(Hash) && separator_options[:wrapper_select_tag]
       end
 
-      def separator_text(type, separators)
-        if separators.is_a?(Hash) && separators[type]
-          separators[type]
+      def wrapper_select_tag(select_tag, type, separator_options)
+        default_options = { html_tag: :div, class_prefix: 'wrapper_select_' }
+        wrapper_options = separator_options[:wrapper_select_tag]
+        wrapper_options = wrapper_options.is_a?(Hash) ? default_options.merge(wrapper_options) : default_options
+        class_name = wrapper_options[:class_prefix] + "#{type}"
+        content_tag(wrapper_options[:html_tag], "\n".html_safe + select_tag, class: class_name) + "\n"
+      end
+
+      def separator_text(type, separator_options)
+        if separator_options.is_a?(Hash) && separator_options[type]
+          separator_options[type]
         else
           key = 'datetime.separators.' + type.to_s
-          I18n.translate(key, locale: @options[:locale])
+          I18n.translate(key, locale: @options[:locale], default: '')
         end
       end
 
-      def separator_tag(type, separators)
-        default_options = { html_tag: :span, class_prefix: 'separator' }
-        options = separators.is_a?(Hash) ? default_options.merge!(separators) : default_options
-        text = separator_text(type, separators)
-        class_name = options[:class_prefix] + "_#{type}"
+      def separator_tag(type, separator_options)
+        text = separator_text(type, separator_options)
+        return text if text.empty?
+
+        default_options = { html_tag: :span, class_prefix: 'separator_' }
+        options = separator_options.is_a?(Hash) ? default_options.merge(separator_options) : default_options
+        class_name = options[:class_prefix] + "#{type}"
         content_tag(options[:html_tag], text, class: class_name) + "\n"
       end
 
       def build_options_and_select_with_separator(type, selected, options = {})
-        separators = @options[:use_separators]
+        separator_options = @options[:use_separators]
 
-        unless use_separators?(type, separators)
+        unless use_separators?(type, separator_options)
           return build_options_and_select_without_separator(type, selected, options)
         end
 
-        if inline_separator?(separators)
-          options.merge!(separator: separator_text(type, separators))
-          build_select(type, build_options_with_separator(selected, options))
+        select_tag = if inline_separator?(separator_options)
+                       options.merge!(separator: separator_text(type, separator_options))
+                       build_select(type, build_options_with_separator(selected, options))
+                     else
+                       build_select(type, build_options(selected, options)) + separator_tag(type, separator_options)
+                     end
+
+        if use_wrapper_select_tag?(separator_options)
+          wrapper_select_tag(select_tag, type, separator_options)
         else
-          build_select(type, build_options(selected, options)) + separator_tag(type, separators)
+          select_tag
         end
       end
       alias_method_chain :build_options_and_select, :separator

data/lib/date_select_separator/version.rb

@@ -1,3 +1,3 @@
 module DateSelectSeparator
-  VERSION = "0.0.6"
+  VERSION = "0.0.7"
 end

data/test/date_select_separator_test.rb

@@ -89,8 +89,8 @@ class DateSelectSeparatorTest < ActionView::TestCase
     expected = select_day(Time.mktime(2003, 8, 16))
     expected << %(<span class="foo_day">dd</span>\n).html_safe
 
-    assert_dom_equal expected, select_day(Time.mktime(2003, 8, 16), use_separators: { class_prefix: 'foo' })
-    assert_dom_equal expected, select_day(16, use_separators: { class_prefix: 'foo' })
+    assert_dom_equal expected, select_day(Time.mktime(2003, 8, 16), use_separators: { class_prefix: 'foo_' })
+    assert_dom_equal expected, select_day(16, use_separators: { class_prefix: 'foo_' })
   end
 
   def test_select_day_with_custom_separator_and_translation
@@ -101,6 +101,26 @@ class DateSelectSeparatorTest < ActionView::TestCase
     assert_dom_equal expected, select_day(16, use_separators: { day: 'foo' })
   end
 
+  def test_select_day_with_custom_separator_and_wrapper_select_tag
+    expected = %(<div class="wrapper_select_day">\n)
+    expected << select_day(Time.mktime(2003, 8, 16))
+    expected << %(<span class="separator_day">dd</span>\n).html_safe
+    expected << %(</div>\n)
+
+    assert_dom_equal expected, select_day(Time.mktime(2003, 8, 16), use_separators: { wrapper_select_tag: true })
+    assert_dom_equal expected, select_day(16, use_separators: { wrapper_select_tag: true })
+  end
+
+  def test_select_day_with_custom_separator_and_wrapper_select_tag_with_options
+    expected = %(<span class="foo_day">\n)
+    expected << select_day(Time.mktime(2003, 8, 16))
+    expected << %(<span class="separator_day">dd</span>\n).html_safe
+    expected << %(</span>\n)
+
+    assert_dom_equal expected, select_day(Time.mktime(2003, 8, 16), use_separators: { wrapper_select_tag: { html_tag: :span, class_prefix: 'foo_' }})
+    assert_dom_equal expected, select_day(16, use_separators: { wrapper_select_tag: { html_tag: :span, class_prefix: 'foo_' }})
+  end
+
   def test_select_month
     expected = select_month(Time.mktime(2003, 8, 16))
     expected << %(<span class="separator_month">mm</span>\n).html_safe
@@ -252,8 +272,8 @@ class DateSelectSeparatorTest < ActionView::TestCase
     expected = select_month(Time.mktime(2003, 8, 16))
     expected << %(<span class="foo_month">mm</span>\n).html_safe
 
-    assert_dom_equal expected, select_month(Time.mktime(2003, 8, 16), use_separators: { class_prefix: 'foo' })
-    assert_dom_equal expected, select_month(8, use_separators: { class_prefix: 'foo' })
+    assert_dom_equal expected, select_month(Time.mktime(2003, 8, 16), use_separators: { class_prefix: 'foo_' })
+    assert_dom_equal expected, select_month(8, use_separators: { class_prefix: 'foo_' })
   end
 
   def test_select_month_with_custom_separator_and_translation
@@ -264,6 +284,25 @@ class DateSelectSeparatorTest < ActionView::TestCase
     assert_dom_equal expected, select_month(8, use_separators: { month: 'foo' })
   end
 
+  def test_select_month_with_custom_separator_and_wrapper_select_tag
+    expected = %(<div class="wrapper_select_month">\n)
+    expected << select_month(Time.mktime(2003, 8, 16))
+    expected << %(<span class="separator_month">mm</span>\n).html_safe
+    expected << %(</div>\n)
+
+    assert_dom_equal expected, select_month(Time.mktime(2003, 8, 16), use_separators: { wrapper_select_tag: true })
+    assert_dom_equal expected, select_month(8, use_separators: { wrapper_select_tag: true })
+  end
+
+  def test_select_month_with_custom_separator_and_wrapper_select_tag_with_options
+    expected = %(<span class="foo_month">\n)
+    expected << select_month(Time.mktime(2003, 8, 16))
+    expected << %(<span class="separator_month">mm</span>\n).html_safe
+    expected << %(</span>\n)
+
+    assert_dom_equal expected, select_month(Time.mktime(2003, 8, 16), use_separators: { wrapper_select_tag: { html_tag: :span, class_prefix: 'foo_' }})
+    assert_dom_equal expected, select_month(8, use_separators: { wrapper_select_tag: { html_tag: :span, class_prefix: 'foo_' }})
+  end
 
   def test_select_year
     expected = select_year(Time.mktime(2003, 8, 16), start_year: 2003, end_year: 2005)
@@ -356,8 +395,8 @@ class DateSelectSeparatorTest < ActionView::TestCase
     expected = select_year(Time.mktime(2003, 8, 16), start_year: 2003, end_year: 2005)
     expected << %(<span class="foo_year">yy</span>\n).html_safe
 
-    assert_dom_equal expected, select_year(Time.mktime(2003, 8, 16), start_year: 2003, end_year: 2005, use_separators: { class_prefix: 'foo' })
-    assert_dom_equal expected, select_year(2003, start_year: 2003, end_year: 2005, use_separators: { class_prefix: 'foo' })
+    assert_dom_equal expected, select_year(Time.mktime(2003, 8, 16), start_year: 2003, end_year: 2005, use_separators: { class_prefix: 'foo_' })
+    assert_dom_equal expected, select_year(2003, start_year: 2003, end_year: 2005, use_separators: { class_prefix: 'foo_' })
   end
 
   def test_select_year_with_custom_separator_and_translation
@@ -368,6 +407,26 @@ class DateSelectSeparatorTest < ActionView::TestCase
     assert_dom_equal expected, select_year(2003, start_year: 2003, end_year: 2005, use_separators: { year: 'foo' })
   end
 
+  def test_select_year_with_custom_separator_and_wrapper_select_tag
+    expected = %(<div class="wrapper_select_year">\n)
+    expected << select_year(Time.mktime(2003, 8, 16))
+    expected << %(<span class="separator_year">yy</span>\n).html_safe
+    expected << %(</div>\n)
+
+    assert_dom_equal expected, select_year(Time.mktime(2003, 8, 16), use_separators: { wrapper_select_tag: true })
+    assert_dom_equal expected, select_year(2003, use_separators: { wrapper_select_tag: true })
+  end
+
+  def test_select_year_with_custom_separator_and_wrapper_select_tag_with_options
+    expected = %(<span class="foo_year">\n)
+    expected << select_year(Time.mktime(2003, 8, 16))
+    expected << %(<span class="separator_year">yy</span>\n).html_safe
+    expected << %(</span>\n)
+
+    assert_dom_equal expected, select_year(Time.mktime(2003, 8, 16), use_separators: { wrapper_select_tag: { html_tag: :span, class_prefix: 'foo_' }})
+    assert_dom_equal expected, select_year(2003, use_separators: { wrapper_select_tag: { html_tag: :span, class_prefix: 'foo_' }})
+  end
+
   def test_select_hour
     expected = select_hour(Time.mktime(2003, 8, 16, 8, 4, 18))
     expected << %(<span class="separator_hour">h</span>\n).html_safe
@@ -449,7 +508,7 @@ class DateSelectSeparatorTest < ActionView::TestCase
     expected = select_hour(Time.mktime(2003, 8, 16, 8, 4, 18))
     expected << %(<span class="foo_hour">h</span>\n).html_safe
 
-    assert_dom_equal expected, select_hour(Time.mktime(2003, 8, 16, 8, 4, 18), use_separators: { class_prefix: 'foo' })
+    assert_dom_equal expected, select_hour(Time.mktime(2003, 8, 16, 8, 4, 18), use_separators: { class_prefix: 'foo_' })
   end
 
   def test_select_hour_with_custom_separator_and_translation
@@ -459,6 +518,24 @@ class DateSelectSeparatorTest < ActionView::TestCase
     assert_dom_equal expected, select_hour(Time.mktime(2003, 8, 16, 8, 4, 18), use_separators: { hour: 'foo' })
   end
 
+  def test_select_hour_with_custom_separator_and_wrapper_select_tag
+    expected = %(<div class="wrapper_select_hour">\n)
+    expected << select_hour(Time.mktime(2003, 8, 16, 8, 4, 18))
+    expected << %(<span class="separator_hour">h</span>\n).html_safe
+    expected << %(</div>\n)
+
+    assert_dom_equal expected, select_hour(Time.mktime(2003, 8, 16, 8, 4, 18), use_separators: { wrapper_select_tag: true })
+  end
+
+  def test_select_hour_with_custom_separator_and_wrapper_select_tag_with_options
+    expected = %(<span class="foo_hour">\n)
+    expected << select_hour(Time.mktime(2003, 8, 16, 8, 4, 18))
+    expected << %(<span class="separator_hour">h</span>\n).html_safe
+    expected << %(</span>\n)
+
+    assert_dom_equal expected, select_hour(Time.mktime(2003, 8, 16, 8, 4, 18), use_separators: { wrapper_select_tag: { html_tag: :span, class_prefix: 'foo_' }})
+  end
+
   def test_select_minute
     expected = select_minute(Time.mktime(2003, 8, 16, 8, 4, 18))
     expected << %(<span class="separator_minute">min</span>\n).html_safe
@@ -555,7 +632,7 @@ class DateSelectSeparatorTest < ActionView::TestCase
     expected = select_minute(Time.mktime(2003, 8, 16, 8, 4, 18))
     expected << %(<span class="foo_minute">min</span>\n).html_safe
 
-    assert_dom_equal expected, select_minute(Time.mktime(2003, 8, 16, 8, 4, 18), use_separators: { class_prefix: 'foo' })
+    assert_dom_equal expected, select_minute(Time.mktime(2003, 8, 16, 8, 4, 18), use_separators: { class_prefix: 'foo_' })
   end
 
   def test_select_minute_with_custom_separator_and_translation
@@ -565,6 +642,24 @@ class DateSelectSeparatorTest < ActionView::TestCase
     assert_dom_equal expected, select_minute(Time.mktime(2003, 8, 16, 8, 4, 18), use_separators: { minute: 'foo' })
   end
 
+  def test_select_minute_with_custom_separator_and_wrapper_select_tag
+    expected = %(<div class="wrapper_select_minute">\n)
+    expected << select_minute(Time.mktime(2003, 8, 16, 8, 4, 18))
+    expected << %(<span class="separator_minute">min</span>\n).html_safe
+    expected << %(</div>\n)
+
+    assert_dom_equal expected, select_minute(Time.mktime(2003, 8, 16, 8, 4, 18), use_separators: { wrapper_select_tag: true })
+  end
+
+  def test_select_minute_with_custom_separator_and_wrapper_select_tag_with_options
+    expected = %(<span class="foo_minute">\n)
+    expected << select_minute(Time.mktime(2003, 8, 16, 8, 4, 18))
+    expected << %(<span class="separator_minute">min</span>\n).html_safe
+    expected << %(</span>\n)
+
+    assert_dom_equal expected, select_minute(Time.mktime(2003, 8, 16, 8, 4, 18), use_separators: { wrapper_select_tag: { html_tag: :span, class_prefix: 'foo_' }})
+  end
+
   def test_select_second
     expected = select_second(Time.mktime(2003, 8, 16, 8, 4, 18))
     expected << %(<span class="separator_second">sec</span>\n).html_safe
@@ -639,7 +734,7 @@ class DateSelectSeparatorTest < ActionView::TestCase
     expected = select_second(Time.mktime(2003, 8, 16, 8, 4, 18))
     expected << %(<span class="foo_second">sec</span>\n).html_safe
 
-    assert_dom_equal expected, select_second(Time.mktime(2003, 8, 16, 8, 4, 18), use_separators: { class_prefix: 'foo' })
+    assert_dom_equal expected, select_second(Time.mktime(2003, 8, 16, 8, 4, 18), use_separators: { class_prefix: 'foo_' })
   end
 
   def test_select_second_with_custom_separator_and_translation
@@ -649,6 +744,24 @@ class DateSelectSeparatorTest < ActionView::TestCase
     assert_dom_equal expected, select_second(Time.mktime(2003, 8, 16, 8, 4, 18), use_separators: { second: 'foo' })
   end
 
+  def test_select_second_with_custom_separator_and_wrapper_select_tag
+    expected = %(<div class="wrapper_select_second">\n)
+    expected << select_second(Time.mktime(2003, 8, 16, 8, 4, 18))
+    expected << %(<span class="separator_second">sec</span>\n).html_safe
+    expected << %(</div>\n)
+
+    assert_dom_equal expected, select_second(Time.mktime(2003, 8, 16, 8, 4, 18), use_separators: { wrapper_select_tag: true })
+  end
+
+  def test_select_second_with_custom_separator_and_wrapper_select_tag_with_options
+    expected = %(<span class="foo_second">\n)
+    expected << select_second(Time.mktime(2003, 8, 16, 8, 4, 18))
+    expected << %(<span class="separator_second">sec</span>\n).html_safe
+    expected << %(</span>\n)
+
+    assert_dom_equal expected, select_second(Time.mktime(2003, 8, 16, 8, 4, 18), use_separators: { wrapper_select_tag: { html_tag: :span, class_prefix: 'foo_' }})
+  end
+
   def test_select_date
     expected =  %(<select id="date_first_year" name="date[first][year]">\n)
     expected << %(<option value="2003" selected="selected">2003</option>\n<option value="2004">2004</option>\n<option value="2005">2005</option>\n)
@@ -1051,7 +1164,7 @@ class DateSelectSeparatorTest < ActionView::TestCase
     expected << "</select>\n"
     expected << %(<span class="foo_day">dd</span>\n)
 
-    assert_dom_equal expected, select_date(Time.mktime(2003, 8, 16), start_year: 2003, end_year: 2005, prefix: "date[first]", use_separators: { class_prefix: 'foo' })
+    assert_dom_equal expected, select_date(Time.mktime(2003, 8, 16), start_year: 2003, end_year: 2005, prefix: "date[first]", use_separators: { class_prefix: 'foo_' })
   end
 
   def test_select_date_with_custom_separator_and_translation
@@ -1073,6 +1186,56 @@ class DateSelectSeparatorTest < ActionView::TestCase
     assert_dom_equal expected, select_date(Time.mktime(2003, 8, 16), start_year: 2003, end_year: 2005, prefix: "date[first]", use_separators: { year: 'foo', month: 'bar', day: 'baz' })
   end
 
+  def test_select_date_with_custom_separator_and_wrapper_select_tag
+    expected = %(<div class="wrapper_select_year">\n)
+    expected <<  %(<select id="date_first_year" name="date[first][year]">\n)
+    expected << %(<option value="2003" selected="selected">2003</option>\n<option value="2004">2004</option>\n<option value="2005">2005</option>\n)
+    expected << "</select>\n"
+    expected << %(<span class="separator_year">yy</span>\n)
+    expected << %(</div>\n)
+
+    expected << %(<div class="wrapper_select_month">\n)
+    expected << %(<select id="date_first_month" name="date[first][month]">\n)
+    expected << %(<option value="1">January</option>\n<option value="2">February</option>\n<option value="3">March</option>\n<option value="4">April</option>\n<option value="5">May</option>\n<option value="6">June</option>\n<option value="7">July</option>\n<option value="8" selected="selected">August</option>\n<option value="9">September</option>\n<option value="10">October</option>\n<option value="11">November</option>\n<option value="12">December</option>\n)
+    expected << "</select>\n"
+    expected << %(<span class="separator_month">mm</span>\n)
+    expected << %(</div>\n)
+
+    expected << %(<div class="wrapper_select_day">\n)
+    expected << %(<select id="date_first_day" name="date[first][day]">\n)
+    expected << %(<option value="1">1</option>\n<option value="2">2</option>\n<option value="3">3</option>\n<option value="4">4</option>\n<option value="5">5</option>\n<option value="6">6</option>\n<option value="7">7</option>\n<option value="8">8</option>\n<option value="9">9</option>\n<option value="10">10</option>\n<option value="11">11</option>\n<option value="12">12</option>\n<option value="13">13</option>\n<option value="14">14</option>\n<option value="15">15</option>\n<option value="16" selected="selected">16</option>\n<option value="17">17</option>\n<option value="18">18</option>\n<option value="19">19</option>\n<option value="20">20</option>\n<option value="21">21</option>\n<option value="22">22</option>\n<option value="23">23</option>\n<option value="24">24</option>\n<option value="25">25</option>\n<option value="26">26</option>\n<option value="27">27</option>\n<option value="28">28</option>\n<option value="29">29</option>\n<option value="30">30</option>\n<option value="31">31</option>\n)
+    expected << "</select>\n"
+    expected << %(<span class="separator_day">dd</span>\n)
+    expected << %(</div>\n)
+
+    assert_dom_equal expected, select_date(Time.mktime(2003, 8, 16), start_year: 2003, end_year: 2005, prefix: "date[first]", use_separators: { wrapper_select_tag: true })
+  end
+
+  def test_select_date_with_custom_separator_and_wrapper_select_tag_with_options
+    expected = %(<span class="foo_year">\n)
+    expected <<  %(<select id="date_first_year" name="date[first][year]">\n)
+    expected << %(<option value="2003" selected="selected">2003</option>\n<option value="2004">2004</option>\n<option value="2005">2005</option>\n)
+    expected << "</select>\n"
+    expected << %(<span class="separator_year">yy</span>\n)
+    expected << %(</span>\n)
+
+    expected << %(<span class="foo_month">\n)
+    expected << %(<select id="date_first_month" name="date[first][month]">\n)
+    expected << %(<option value="1">January</option>\n<option value="2">February</option>\n<option value="3">March</option>\n<option value="4">April</option>\n<option value="5">May</option>\n<option value="6">June</option>\n<option value="7">July</option>\n<option value="8" selected="selected">August</option>\n<option value="9">September</option>\n<option value="10">October</option>\n<option value="11">November</option>\n<option value="12">December</option>\n)
+    expected << "</select>\n"
+    expected << %(<span class="separator_month">mm</span>\n)
+    expected << %(</span>\n)
+
+    expected << %(<span class="foo_day">\n)
+    expected << %(<select id="date_first_day" name="date[first][day]">\n)
+    expected << %(<option value="1">1</option>\n<option value="2">2</option>\n<option value="3">3</option>\n<option value="4">4</option>\n<option value="5">5</option>\n<option value="6">6</option>\n<option value="7">7</option>\n<option value="8">8</option>\n<option value="9">9</option>\n<option value="10">10</option>\n<option value="11">11</option>\n<option value="12">12</option>\n<option value="13">13</option>\n<option value="14">14</option>\n<option value="15">15</option>\n<option value="16" selected="selected">16</option>\n<option value="17">17</option>\n<option value="18">18</option>\n<option value="19">19</option>\n<option value="20">20</option>\n<option value="21">21</option>\n<option value="22">22</option>\n<option value="23">23</option>\n<option value="24">24</option>\n<option value="25">25</option>\n<option value="26">26</option>\n<option value="27">27</option>\n<option value="28">28</option>\n<option value="29">29</option>\n<option value="30">30</option>\n<option value="31">31</option>\n)
+    expected << "</select>\n"
+    expected << %(<span class="separator_day">dd</span>\n)
+    expected << %(</span>\n)
+
+    assert_dom_equal expected, select_date(Time.mktime(2003, 8, 16), start_year: 2003, end_year: 2005, prefix: "date[first]", use_separators: { wrapper_select_tag: { html_tag: :span, class_prefix: 'foo_' }})
+  end
+
   def test_select_datetime
     expected =  %(<select id="date_first_year" name="date[first][year]">\n)
     expected << %(<option value="2003" selected="selected">2003</option>\n<option value="2004">2004</option>\n<option value="2005">2005</option>\n)
@@ -1483,7 +1646,7 @@ class DateSelectSeparatorTest < ActionView::TestCase
     expected << "</select>\n"
     expected << %(<span class="foo_minute">min</span>\n)
 
-    assert_dom_equal expected, select_datetime(Time.mktime(2003, 8, 16, 8, 4, 18), start_year: 2003, end_year: 2005, prefix: "date[first]", use_separators: { class_prefix: 'foo' })
+    assert_dom_equal expected, select_datetime(Time.mktime(2003, 8, 16, 8, 4, 18), start_year: 2003, end_year: 2005, prefix: "date[first]", use_separators: { class_prefix: 'foo_' })
   end
 
   def test_select_datetime_with_custom_separator_and_translation
@@ -1519,6 +1682,92 @@ class DateSelectSeparatorTest < ActionView::TestCase
     assert_dom_equal expected, select_datetime(Time.mktime(2003, 8, 16, 8, 4, 18), start_year: 2003, end_year: 2005, prefix: "date[first]", use_separators: { year: 'foo', month: 'bar', day: 'baz', hour: 'hoge', minute: 'fuga' })
   end
 
+  def test_select_datetime_with_custom_separator_and_wrapper_select_tag
+    expected = %(<div class="wrapper_select_year">\n)
+    expected <<  %(<select id="date_first_year" name="date[first][year]">\n)
+    expected << %(<option value="2003" selected="selected">2003</option>\n<option value="2004">2004</option>\n<option value="2005">2005</option>\n)
+    expected << "</select>\n"
+    expected << %(<span class="separator_year">yy</span>\n)
+    expected << %(</div>\n)
+
+    expected << %(<div class="wrapper_select_month">\n)
+    expected << %(<select id="date_first_month" name="date[first][month]">\n)
+    expected << %(<option value="1">January</option>\n<option value="2">February</option>\n<option value="3">March</option>\n<option value="4">April</option>\n<option value="5">May</option>\n<option value="6">June</option>\n<option value="7">July</option>\n<option value="8" selected="selected">August</option>\n<option value="9">September</option>\n<option value="10">October</option>\n<option value="11">November</option>\n<option value="12">December</option>\n)
+    expected << "</select>\n"
+    expected << %(<span class="separator_month">mm</span>\n)
+    expected << %(</div>\n)
+
+    expected << %(<div class="wrapper_select_day">\n)
+    expected << %(<select id="date_first_day" name="date[first][day]">\n)
+    expected << %(<option value="1">1</option>\n<option value="2">2</option>\n<option value="3">3</option>\n<option value="4">4</option>\n<option value="5">5</option>\n<option value="6">6</option>\n<option value="7">7</option>\n<option value="8">8</option>\n<option value="9">9</option>\n<option value="10">10</option>\n<option value="11">11</option>\n<option value="12">12</option>\n<option value="13">13</option>\n<option value="14">14</option>\n<option value="15">15</option>\n<option value="16" selected="selected">16</option>\n<option value="17">17</option>\n<option value="18">18</option>\n<option value="19">19</option>\n<option value="20">20</option>\n<option value="21">21</option>\n<option value="22">22</option>\n<option value="23">23</option>\n<option value="24">24</option>\n<option value="25">25</option>\n<option value="26">26</option>\n<option value="27">27</option>\n<option value="28">28</option>\n<option value="29">29</option>\n<option value="30">30</option>\n<option value="31">31</option>\n)
+    expected << "</select>\n"
+    expected << %(<span class="separator_day">dd</span>\n)
+    expected << %(</div>\n)
+
+    expected << " &mdash; "
+
+    expected << %(<div class="wrapper_select_hour">\n)
+    expected << %(<select id="date_first_hour" name="date[first][hour]">\n)
+    expected << %(<option value="00">00</option>\n<option value="01">01</option>\n<option value="02">02</option>\n<option value="03">03</option>\n<option value="04">04</option>\n<option value="05">05</option>\n<option value="06">06</option>\n<option value="07">07</option>\n<option value="08" selected="selected">08</option>\n<option value="09">09</option>\n<option value="10">10</option>\n<option value="11">11</option>\n<option value="12">12</option>\n<option value="13">13</option>\n<option value="14">14</option>\n<option value="15">15</option>\n<option value="16">16</option>\n<option value="17">17</option>\n<option value="18">18</option>\n<option value="19">19</option>\n<option value="20">20</option>\n<option value="21">21</option>\n<option value="22">22</option>\n<option value="23">23</option>\n)
+    expected << "</select>\n"
+    expected << %(<span class="separator_hour">h</span>\n)
+    expected << %(</div>\n)
+
+    expected << " : "
+
+    expected << %(<div class="wrapper_select_minute">\n)
+    expected << %(<select id="date_first_minute" name="date[first][minute]">\n)
+    expected << %(<option value="00">00</option>\n<option value="01">01</option>\n<option value="02">02</option>\n<option value="03">03</option>\n<option value="04" selected="selected">04</option>\n<option value="05">05</option>\n<option value="06">06</option>\n<option value="07">07</option>\n<option value="08">08</option>\n<option value="09">09</option>\n<option value="10">10</option>\n<option value="11">11</option>\n<option value="12">12</option>\n<option value="13">13</option>\n<option value="14">14</option>\n<option value="15">15</option>\n<option value="16">16</option>\n<option value="17">17</option>\n<option value="18">18</option>\n<option value="19">19</option>\n<option value="20">20</option>\n<option value="21">21</option>\n<option value="22">22</option>\n<option value="23">23</option>\n<option value="24">24</option>\n<option value="25">25</option>\n<option value="26">26</option>\n<option value="27">27</option>\n<option value="28">28</option>\n<option value="29">29</option>\n<option value="30">30</option>\n<option value="31">31</option>\n<option value="32">32</option>\n<option value="33">33</option>\n<option value="34">34</option>\n<option value="35">35</option>\n<option value="36">36</option>\n<option value="37">37</option>\n<option value="38">38</option>\n<option value="39">39</option>\n<option value="40">40</option>\n<option value="41">41</option>\n<option value="42">42</option>\n<option value="43">43</option>\n<option value="44">44</option>\n<option value="45">45</option>\n<option value="46">46</option>\n<option value="47">47</option>\n<option value="48">48</option>\n<option value="49">49</option>\n<option value="50">50</option>\n<option value="51">51</option>\n<option value="52">52</option>\n<option value="53">53</option>\n<option value="54">54</option>\n<option value="55">55</option>\n<option value="56">56</option>\n<option value="57">57</option>\n<option value="58">58</option>\n<option value="59">59</option>\n)
+    expected << "</select>\n"
+    expected << %(<span class="separator_minute">min</span>\n)
+    expected << %(</div>\n)
+
+    assert_dom_equal expected, select_datetime(Time.mktime(2003, 8, 16, 8, 4, 18), start_year: 2003, end_year: 2005, prefix: "date[first]", use_separators: { wrapper_select_tag: true })
+  end
+
+  def test_select_datetime_with_custom_separator_and_wrapper_select_tag_with_options
+    expected = %(<span class="foo_year">\n)
+    expected <<  %(<select id="date_first_year" name="date[first][year]">\n)
+    expected << %(<option value="2003" selected="selected">2003</option>\n<option value="2004">2004</option>\n<option value="2005">2005</option>\n)
+    expected << "</select>\n"
+    expected << %(<span class="separator_year">yy</span>\n)
+    expected << %(</span>\n)
+
+    expected << %(<span class="foo_month">\n)
+    expected << %(<select id="date_first_month" name="date[first][month]">\n)
+    expected << %(<option value="1">January</option>\n<option value="2">February</option>\n<option value="3">March</option>\n<option value="4">April</option>\n<option value="5">May</option>\n<option value="6">June</option>\n<option value="7">July</option>\n<option value="8" selected="selected">August</option>\n<option value="9">September</option>\n<option value="10">October</option>\n<option value="11">November</option>\n<option value="12">December</option>\n)
+    expected << "</select>\n"
+    expected << %(<span class="separator_month">mm</span>\n)
+    expected << %(</span>\n)
+
+    expected << %(<span class="foo_day">\n)
+    expected << %(<select id="date_first_day" name="date[first][day]">\n)
+    expected << %(<option value="1">1</option>\n<option value="2">2</option>\n<option value="3">3</option>\n<option value="4">4</option>\n<option value="5">5</option>\n<option value="6">6</option>\n<option value="7">7</option>\n<option value="8">8</option>\n<option value="9">9</option>\n<option value="10">10</option>\n<option value="11">11</option>\n<option value="12">12</option>\n<option value="13">13</option>\n<option value="14">14</option>\n<option value="15">15</option>\n<option value="16" selected="selected">16</option>\n<option value="17">17</option>\n<option value="18">18</option>\n<option value="19">19</option>\n<option value="20">20</option>\n<option value="21">21</option>\n<option value="22">22</option>\n<option value="23">23</option>\n<option value="24">24</option>\n<option value="25">25</option>\n<option value="26">26</option>\n<option value="27">27</option>\n<option value="28">28</option>\n<option value="29">29</option>\n<option value="30">30</option>\n<option value="31">31</option>\n)
+    expected << "</select>\n"
+    expected << %(<span class="separator_day">dd</span>\n)
+    expected << %(</span>\n)
+
+    expected << " &mdash; "
+
+    expected << %(<span class="foo_hour">\n)
+    expected << %(<select id="date_first_hour" name="date[first][hour]">\n)
+    expected << %(<option value="00">00</option>\n<option value="01">01</option>\n<option value="02">02</option>\n<option value="03">03</option>\n<option value="04">04</option>\n<option value="05">05</option>\n<option value="06">06</option>\n<option value="07">07</option>\n<option value="08" selected="selected">08</option>\n<option value="09">09</option>\n<option value="10">10</option>\n<option value="11">11</option>\n<option value="12">12</option>\n<option value="13">13</option>\n<option value="14">14</option>\n<option value="15">15</option>\n<option value="16">16</option>\n<option value="17">17</option>\n<option value="18">18</option>\n<option value="19">19</option>\n<option value="20">20</option>\n<option value="21">21</option>\n<option value="22">22</option>\n<option value="23">23</option>\n)
+    expected << "</select>\n"
+    expected << %(<span class="separator_hour">h</span>\n)
+    expected << %(</span>\n)
+
+    expected << " : "
+
+    expected << %(<span class="foo_minute">\n)
+    expected << %(<select id="date_first_minute" name="date[first][minute]">\n)
+    expected << %(<option value="00">00</option>\n<option value="01">01</option>\n<option value="02">02</option>\n<option value="03">03</option>\n<option value="04" selected="selected">04</option>\n<option value="05">05</option>\n<option value="06">06</option>\n<option value="07">07</option>\n<option value="08">08</option>\n<option value="09">09</option>\n<option value="10">10</option>\n<option value="11">11</option>\n<option value="12">12</option>\n<option value="13">13</option>\n<option value="14">14</option>\n<option value="15">15</option>\n<option value="16">16</option>\n<option value="17">17</option>\n<option value="18">18</option>\n<option value="19">19</option>\n<option value="20">20</option>\n<option value="21">21</option>\n<option value="22">22</option>\n<option value="23">23</option>\n<option value="24">24</option>\n<option value="25">25</option>\n<option value="26">26</option>\n<option value="27">27</option>\n<option value="28">28</option>\n<option value="29">29</option>\n<option value="30">30</option>\n<option value="31">31</option>\n<option value="32">32</option>\n<option value="33">33</option>\n<option value="34">34</option>\n<option value="35">35</option>\n<option value="36">36</option>\n<option value="37">37</option>\n<option value="38">38</option>\n<option value="39">39</option>\n<option value="40">40</option>\n<option value="41">41</option>\n<option value="42">42</option>\n<option value="43">43</option>\n<option value="44">44</option>\n<option value="45">45</option>\n<option value="46">46</option>\n<option value="47">47</option>\n<option value="48">48</option>\n<option value="49">49</option>\n<option value="50">50</option>\n<option value="51">51</option>\n<option value="52">52</option>\n<option value="53">53</option>\n<option value="54">54</option>\n<option value="55">55</option>\n<option value="56">56</option>\n<option value="57">57</option>\n<option value="58">58</option>\n<option value="59">59</option>\n)
+    expected << "</select>\n"
+    expected << %(<span class="separator_minute">min</span>\n)
+    expected << %(</span>\n)
+
+    assert_dom_equal expected, select_datetime(Time.mktime(2003, 8, 16, 8, 4, 18), start_year: 2003, end_year: 2005, prefix: "date[first]", use_separators: { wrapper_select_tag: { html_tag: :span, class_prefix: 'foo_' }})
+  end
+
   def test_select_time
     expected = %(<input name="date[year]" id="date_year" value="2003" type="hidden" />\n)
     expected << %(<input name="date[month]" id="date_month" value="8" type="hidden" />\n)
@@ -1782,8 +2031,8 @@ class DateSelectSeparatorTest < ActionView::TestCase
     expected << "</select>\n"
     expected << %(<span class="foo_minute">min</span>\n)
 
-    assert_dom_equal expected, select_time(Time.mktime(2003, 8, 16, 8, 4, 18), use_separators: { class_prefix: 'foo' })
-    assert_dom_equal expected, select_time(Time.mktime(2003, 8, 16, 8, 4, 18), include_seconds: false, use_separators: { class_prefix: 'foo' })
+    assert_dom_equal expected, select_time(Time.mktime(2003, 8, 16, 8, 4, 18), use_separators: { class_prefix: 'foo_' })
+    assert_dom_equal expected, select_time(Time.mktime(2003, 8, 16, 8, 4, 18), include_seconds: false, use_separators: { class_prefix: 'foo_' })
   end
 
   def test_select_time_with_custom_separator_and_translation
@@ -1807,6 +2056,56 @@ class DateSelectSeparatorTest < ActionView::TestCase
     assert_dom_equal expected, select_time(Time.mktime(2003, 8, 16, 8, 4, 18), include_seconds: false, use_separators: { hour: 'hoge', minute: 'fuga' })
   end
 
+  def test_select_time_with_custom_separator_and_wrapper_select_tag
+    expected = %(<input name="date[year]" id="date_year" value="2003" type="hidden" />\n)
+    expected << %(<input name="date[month]" id="date_month" value="8" type="hidden" />\n)
+    expected << %(<input name="date[day]" id="date_day" value="16" type="hidden" />\n)
+
+    expected << %(<div class="wrapper_select_hour">\n)
+    expected << %(<select id="date_hour" name="date[hour]">\n)
+    expected << %(<option value="00">00</option>\n<option value="01">01</option>\n<option value="02">02</option>\n<option value="03">03</option>\n<option value="04">04</option>\n<option value="05">05</option>\n<option value="06">06</option>\n<option value="07">07</option>\n<option value="08" selected="selected">08</option>\n<option value="09">09</option>\n<option value="10">10</option>\n<option value="11">11</option>\n<option value="12">12</option>\n<option value="13">13</option>\n<option value="14">14</option>\n<option value="15">15</option>\n<option value="16">16</option>\n<option value="17">17</option>\n<option value="18">18</option>\n<option value="19">19</option>\n<option value="20">20</option>\n<option value="21">21</option>\n<option value="22">22</option>\n<option value="23">23</option>\n)
+    expected << "</select>\n"
+    expected << %(<span class="separator_hour">h</span>\n)
+    expected << %(</div>\n)
+
+    expected << " : "
+
+    expected << %(<div class="wrapper_select_minute">\n)
+    expected << %(<select id="date_minute" name="date[minute]">\n)
+    expected << %(<option value="00">00</option>\n<option value="01">01</option>\n<option value="02">02</option>\n<option value="03">03</option>\n<option value="04" selected="selected">04</option>\n<option value="05">05</option>\n<option value="06">06</option>\n<option value="07">07</option>\n<option value="08">08</option>\n<option value="09">09</option>\n<option value="10">10</option>\n<option value="11">11</option>\n<option value="12">12</option>\n<option value="13">13</option>\n<option value="14">14</option>\n<option value="15">15</option>\n<option value="16">16</option>\n<option value="17">17</option>\n<option value="18">18</option>\n<option value="19">19</option>\n<option value="20">20</option>\n<option value="21">21</option>\n<option value="22">22</option>\n<option value="23">23</option>\n<option value="24">24</option>\n<option value="25">25</option>\n<option value="26">26</option>\n<option value="27">27</option>\n<option value="28">28</option>\n<option value="29">29</option>\n<option value="30">30</option>\n<option value="31">31</option>\n<option value="32">32</option>\n<option value="33">33</option>\n<option value="34">34</option>\n<option value="35">35</option>\n<option value="36">36</option>\n<option value="37">37</option>\n<option value="38">38</option>\n<option value="39">39</option>\n<option value="40">40</option>\n<option value="41">41</option>\n<option value="42">42</option>\n<option value="43">43</option>\n<option value="44">44</option>\n<option value="45">45</option>\n<option value="46">46</option>\n<option value="47">47</option>\n<option value="48">48</option>\n<option value="49">49</option>\n<option value="50">50</option>\n<option value="51">51</option>\n<option value="52">52</option>\n<option value="53">53</option>\n<option value="54">54</option>\n<option value="55">55</option>\n<option value="56">56</option>\n<option value="57">57</option>\n<option value="58">58</option>\n<option value="59">59</option>\n)
+    expected << "</select>\n"
+    expected << %(<span class="separator_minute">min</span>\n)
+    expected << %(</div>\n)
+
+    assert_dom_equal expected, select_time(Time.mktime(2003, 8, 16, 8, 4, 18), use_separators: { wrapper_select_tag: true })
+    assert_dom_equal expected, select_time(Time.mktime(2003, 8, 16, 8, 4, 18), include_seconds: false, use_separators: { wrapper_select_tag: true })
+  end
+
+  def test_select_time_with_custom_separator_and_wrapper_select_tag_with_options
+    expected = %(<input name="date[year]" id="date_year" value="2003" type="hidden" />\n)
+    expected << %(<input name="date[month]" id="date_month" value="8" type="hidden" />\n)
+    expected << %(<input name="date[day]" id="date_day" value="16" type="hidden" />\n)
+
+    expected << %(<span class="foo_hour">\n)
+    expected << %(<select id="date_hour" name="date[hour]">\n)
+    expected << %(<option value="00">00</option>\n<option value="01">01</option>\n<option value="02">02</option>\n<option value="03">03</option>\n<option value="04">04</option>\n<option value="05">05</option>\n<option value="06">06</option>\n<option value="07">07</option>\n<option value="08" selected="selected">08</option>\n<option value="09">09</option>\n<option value="10">10</option>\n<option value="11">11</option>\n<option value="12">12</option>\n<option value="13">13</option>\n<option value="14">14</option>\n<option value="15">15</option>\n<option value="16">16</option>\n<option value="17">17</option>\n<option value="18">18</option>\n<option value="19">19</option>\n<option value="20">20</option>\n<option value="21">21</option>\n<option value="22">22</option>\n<option value="23">23</option>\n)
+    expected << "</select>\n"
+    expected << %(<span class="separator_hour">h</span>\n)
+    expected << %(</span>\n)
+
+    expected << " : "
+
+    expected << %(<span class="foo_minute">\n)
+    expected << %(<select id="date_minute" name="date[minute]">\n)
+    expected << %(<option value="00">00</option>\n<option value="01">01</option>\n<option value="02">02</option>\n<option value="03">03</option>\n<option value="04" selected="selected">04</option>\n<option value="05">05</option>\n<option value="06">06</option>\n<option value="07">07</option>\n<option value="08">08</option>\n<option value="09">09</option>\n<option value="10">10</option>\n<option value="11">11</option>\n<option value="12">12</option>\n<option value="13">13</option>\n<option value="14">14</option>\n<option value="15">15</option>\n<option value="16">16</option>\n<option value="17">17</option>\n<option value="18">18</option>\n<option value="19">19</option>\n<option value="20">20</option>\n<option value="21">21</option>\n<option value="22">22</option>\n<option value="23">23</option>\n<option value="24">24</option>\n<option value="25">25</option>\n<option value="26">26</option>\n<option value="27">27</option>\n<option value="28">28</option>\n<option value="29">29</option>\n<option value="30">30</option>\n<option value="31">31</option>\n<option value="32">32</option>\n<option value="33">33</option>\n<option value="34">34</option>\n<option value="35">35</option>\n<option value="36">36</option>\n<option value="37">37</option>\n<option value="38">38</option>\n<option value="39">39</option>\n<option value="40">40</option>\n<option value="41">41</option>\n<option value="42">42</option>\n<option value="43">43</option>\n<option value="44">44</option>\n<option value="45">45</option>\n<option value="46">46</option>\n<option value="47">47</option>\n<option value="48">48</option>\n<option value="49">49</option>\n<option value="50">50</option>\n<option value="51">51</option>\n<option value="52">52</option>\n<option value="53">53</option>\n<option value="54">54</option>\n<option value="55">55</option>\n<option value="56">56</option>\n<option value="57">57</option>\n<option value="58">58</option>\n<option value="59">59</option>\n)
+    expected << "</select>\n"
+    expected << %(<span class="separator_minute">min</span>\n)
+    expected << %(</span>\n)
+
+    assert_dom_equal expected, select_time(Time.mktime(2003, 8, 16, 8, 4, 18), use_separators: { wrapper_select_tag: { html_tag: :span, class_prefix: 'foo_' }})
+    assert_dom_equal expected, select_time(Time.mktime(2003, 8, 16, 8, 4, 18), include_seconds: false, use_separators: { wrapper_select_tag: { html_tag: :span, class_prefix: 'foo_' }})
+  end
+
   def test_date_select
     @post = Post.new
     @post.written_on = Date.new(2004, 6, 15)
@@ -2422,7 +2721,7 @@ class DateSelectSeparatorTest < ActionView::TestCase
     expected << "</select>\n"
     expected << %(<span class="foo_day">dd</span>\n)
 
-    assert_dom_equal expected, date_select("post", "written_on", use_separators: { class_prefix: 'foo' })
+    assert_dom_equal expected, date_select("post", "written_on", use_separators: { class_prefix: 'foo_' })
   end
 
   def test_date_select_with_custom_separator_and_translation
@@ -2488,6 +2787,61 @@ class DateSelectSeparatorTest < ActionView::TestCase
     assert_dom_equal expected, date_select("post", "written_on", use_separators: { inline: true }, locale: :ja)
   end
 
+  def test_date_select_with_custom_separator_and_wrapper_select_tag
+    @post = Post.new
+    @post.written_on = Date.new(2004, 6, 15)
+
+    expected = %(<div class="wrapper_select_year">\n)
+    expected << %{<select id="post_written_on_1i" name="post[written_on(1i)]">\n}
+    expected << %{<option value="1999">1999</option>\n<option value="2000">2000</option>\n<option value="2001">2001</option>\n<option value="2002">2002</option>\n<option value="2003">2003</option>\n<option value="2004" selected="selected">2004</option>\n<option value="2005">2005</option>\n<option value="2006">2006</option>\n<option value="2007">2007</option>\n<option value="2008">2008</option>\n<option value="2009">2009</option>\n}
+    expected << "</select>\n"
+    expected << %(<span class="separator_year">yy</span>\n)
+    expected << %(</div>\n)
+
+    expected << %(<div class="wrapper_select_month">\n)
+    expected << %{<select id="post_written_on_2i" name="post[written_on(2i)]">\n}
+    expected << %{<option value="1">January</option>\n<option value="2">February</option>\n<option value="3">March</option>\n<option value="4">April</option>\n<option value="5">May</option>\n<option value="6" selected="selected">June</option>\n<option value="7">July</option>\n<option value="8">August</option>\n<option value="9">September</option>\n<option value="10">October</option>\n<option value="11">November</option>\n<option value="12">December</option>\n}
+    expected << "</select>\n"
+    expected << %(<span class="separator_month">mm</span>\n)
+    expected << %(</div>\n)
+
+    expected << %(<div class="wrapper_select_day">\n)
+    expected << %{<select id="post_written_on_3i" name="post[written_on(3i)]">\n}
+    expected << %{<option value="1">1</option>\n<option value="2">2</option>\n<option value="3">3</option>\n<option value="4">4</option>\n<option value="5">5</option>\n<option value="6">6</option>\n<option value="7">7</option>\n<option value="8">8</option>\n<option value="9">9</option>\n<option value="10">10</option>\n<option value="11">11</option>\n<option value="12">12</option>\n<option value="13">13</option>\n<option value="14">14</option>\n<option value="15" selected="selected">15</option>\n<option value="16">16</option>\n<option value="17">17</option>\n<option value="18">18</option>\n<option value="19">19</option>\n<option value="20">20</option>\n<option value="21">21</option>\n<option value="22">22</option>\n<option value="23">23</option>\n<option value="24">24</option>\n<option value="25">25</option>\n<option value="26">26</option>\n<option value="27">27</option>\n<option value="28">28</option>\n<option value="29">29</option>\n<option value="30">30</option>\n<option value="31">31</option>\n}
+    expected << "</select>\n"
+    expected << %(<span class="separator_day">dd</span>\n)
+    expected << %(</div>\n)
+
+    assert_dom_equal expected, date_select("post", "written_on", use_separators: { wrapper_select_tag: true })
+  end
+
+  def test_date_select_with_custom_separator_and_wrapper_select_tag_with_options
+    @post = Post.new
+    @post.written_on = Date.new(2004, 6, 15)
+
+    expected = %(<span class="foo_year">\n)
+    expected << %{<select id="post_written_on_1i" name="post[written_on(1i)]">\n}
+    expected << %{<option value="1999">1999</option>\n<option value="2000">2000</option>\n<option value="2001">2001</option>\n<option value="2002">2002</option>\n<option value="2003">2003</option>\n<option value="2004" selected="selected">2004</option>\n<option value="2005">2005</option>\n<option value="2006">2006</option>\n<option value="2007">2007</option>\n<option value="2008">2008</option>\n<option value="2009">2009</option>\n}
+    expected << "</select>\n"
+    expected << %(<span class="separator_year">yy</span>\n)
+    expected << %(</span>\n)
+
+    expected << %(<span class="foo_month">\n)
+    expected << %{<select id="post_written_on_2i" name="post[written_on(2i)]">\n}
+    expected << %{<option value="1">January</option>\n<option value="2">February</option>\n<option value="3">March</option>\n<option value="4">April</option>\n<option value="5">May</option>\n<option value="6" selected="selected">June</option>\n<option value="7">July</option>\n<option value="8">August</option>\n<option value="9">September</option>\n<option value="10">October</option>\n<option value="11">November</option>\n<option value="12">December</option>\n}
+    expected << "</select>\n"
+    expected << %(<span class="separator_month">mm</span>\n)
+    expected << %(</span>\n)
+
+    expected << %(<span class="foo_day">\n)
+    expected << %{<select id="post_written_on_3i" name="post[written_on(3i)]">\n}
+    expected << %{<option value="1">1</option>\n<option value="2">2</option>\n<option value="3">3</option>\n<option value="4">4</option>\n<option value="5">5</option>\n<option value="6">6</option>\n<option value="7">7</option>\n<option value="8">8</option>\n<option value="9">9</option>\n<option value="10">10</option>\n<option value="11">11</option>\n<option value="12">12</option>\n<option value="13">13</option>\n<option value="14">14</option>\n<option value="15" selected="selected">15</option>\n<option value="16">16</option>\n<option value="17">17</option>\n<option value="18">18</option>\n<option value="19">19</option>\n<option value="20">20</option>\n<option value="21">21</option>\n<option value="22">22</option>\n<option value="23">23</option>\n<option value="24">24</option>\n<option value="25">25</option>\n<option value="26">26</option>\n<option value="27">27</option>\n<option value="28">28</option>\n<option value="29">29</option>\n<option value="30">30</option>\n<option value="31">31</option>\n}
+    expected << "</select>\n"
+    expected << %(<span class="separator_day">dd</span>\n)
+    expected << %(</span>\n)
+
+    assert_dom_equal expected, date_select("post", "written_on", use_separators: { wrapper_select_tag: { html_tag: :span, class_prefix: 'foo_' }})
+  end
 
   def test_time_select
     @post = Post.new
@@ -2796,7 +3150,7 @@ class DateSelectSeparatorTest < ActionView::TestCase
     expected << "</select>\n"
     expected << %(<span class="foo_minute">min</span>\n)
 
-    assert_dom_equal expected, time_select("post", "written_on", use_separators: { class_prefix: 'foo' })
+    assert_dom_equal expected, time_select("post", "written_on", use_separators: { class_prefix: 'foo_' })
   end
 
   def test_time_select_with_custom_separator_and_translation
@@ -2820,6 +3174,31 @@ class DateSelectSeparatorTest < ActionView::TestCase
     assert_dom_equal expected, time_select("post", "written_on", use_separators: { hour: 'foo', minute: 'bar' })
   end
 
+  def test_time_select_with_custom_separator_and_wrapper_select_tag
+    @post = Post.new
+    @post.written_on = Time.local(2004, 6, 15, 15, 16, 35)
+
+    expected = %{<input type="hidden" id="post_written_on_1i" name="post[written_on(1i)]" value="2004" />\n}
+    expected << %{<input type="hidden" id="post_written_on_2i" name="post[written_on(2i)]" value="6" />\n}
+    expected << %{<input type="hidden" id="post_written_on_3i" name="post[written_on(3i)]" value="15" />\n}
+
+    expected << %(<div class="wrapper_select_hour">\n)
+    expected << %(<select id="post_written_on_4i" name="post[written_on(4i)]">\n)
+    0.upto(23) { |i| expected << %(<option value="#{sprintf("%02d", i)}"#{' selected="selected"' if i == 15}>#{sprintf("%02d", i)}</option>\n) }
+    expected << "</select>\n"
+    expected << %(<span class="separator_hour">h</span>\n)
+    expected << %(</div>\n)
+    expected << " : "
+    expected << %(<div class="wrapper_select_minute">\n)
+    expected << %(<select id="post_written_on_5i" name="post[written_on(5i)]">\n)
+    0.upto(59) { |i| expected << %(<option value="#{sprintf("%02d", i)}"#{' selected="selected"' if i == 16}>#{sprintf("%02d", i)}</option>\n) }
+    expected << "</select>\n"
+    expected << %(<span class="separator_minute">min</span>\n)
+    expected << %(</div>\n)
+
+    assert_dom_equal expected, time_select("post", "written_on", use_separators: { wrapper_select_tag: true })
+  end
+
   def test_datetime_select
     @post = Post.new
     @post.updated_at = Time.local(2004, 6, 15, 16, 35)
@@ -3208,7 +3587,7 @@ class DateSelectSeparatorTest < ActionView::TestCase
     expected << "</select>\n"
     expected << %(<span class="foo_minute">min</span>\n)
 
-    assert_dom_equal expected, datetime_select("post", "updated_at", use_separators: { class_prefix: 'foo' })
+    assert_dom_equal expected, datetime_select("post", "updated_at", use_separators: { class_prefix: 'foo_' })
   end
 
   def test_datetime_select_with_custom_separator_and_translation
@@ -3308,6 +3687,94 @@ class DateSelectSeparatorTest < ActionView::TestCase
     assert_dom_equal expected, datetime_select("post", "updated_at", use_separators: { inline: true }, locale: :ja)
   end
 
+  def test_datetime_select_with_custom_separator_and_wrapper_select_tag
+    @post = Post.new
+    @post.updated_at = Time.local(2004, 6, 15, 16, 35)
+
+    expected = %(<div class="wrapper_select_year">\n)
+    expected << %{<select id="post_updated_at_1i" name="post[updated_at(1i)]">\n}
+    expected << %{<option value="1999">1999</option>\n<option value="2000">2000</option>\n<option value="2001">2001</option>\n<option value="2002">2002</option>\n<option value="2003">2003</option>\n<option value="2004" selected="selected">2004</option>\n<option value="2005">2005</option>\n<option value="2006">2006</option>\n<option value="2007">2007</option>\n<option value="2008">2008</option>\n<option value="2009">2009</option>\n}
+    expected << "</select>\n"
+    expected << %(<span class="separator_year">yy</span>\n)
+    expected << %(</div>\n)
+
+    expected << %(<div class="wrapper_select_month">\n)
+    expected << %{<select id="post_updated_at_2i" name="post[updated_at(2i)]">\n}
+    expected << %{<option value="1">January</option>\n<option value="2">February</option>\n<option value="3">March</option>\n<option value="4">April</option>\n<option value="5">May</option>\n<option value="6" selected="selected">June</option>\n<option value="7">July</option>\n<option value="8">August</option>\n<option value="9">September</option>\n<option value="10">October</option>\n<option value="11">November</option>\n<option value="12">December</option>\n}
+    expected << "</select>\n"
+    expected << %(<span class="separator_month">mm</span>\n)
+    expected << %(</div>\n)
+
+    expected << %(<div class="wrapper_select_day">\n)
+    expected << %{<select id="post_updated_at_3i" name="post[updated_at(3i)]">\n}
+    expected << %{<option value="1">1</option>\n<option value="2">2</option>\n<option value="3">3</option>\n<option value="4">4</option>\n<option value="5">5</option>\n<option value="6">6</option>\n<option value="7">7</option>\n<option value="8">8</option>\n<option value="9">9</option>\n<option value="10">10</option>\n<option value="11">11</option>\n<option value="12">12</option>\n<option value="13">13</option>\n<option value="14">14</option>\n<option value="15" selected="selected">15</option>\n<option value="16">16</option>\n<option value="17">17</option>\n<option value="18">18</option>\n<option value="19">19</option>\n<option value="20">20</option>\n<option value="21">21</option>\n<option value="22">22</option>\n<option value="23">23</option>\n<option value="24">24</option>\n<option value="25">25</option>\n<option value="26">26</option>\n<option value="27">27</option>\n<option value="28">28</option>\n<option value="29">29</option>\n<option value="30">30</option>\n<option value="31">31</option>\n}
+    expected << "</select>\n"
+    expected << %(<span class="separator_day">dd</span>\n)
+    expected << %(</div>\n)
+
+    expected << " &mdash; "
+
+    expected << %(<div class="wrapper_select_hour">\n)
+    expected << %{<select id="post_updated_at_4i" name="post[updated_at(4i)]">\n}
+    expected << %{<option value="00">00</option>\n<option value="01">01</option>\n<option value="02">02</option>\n<option value="03">03</option>\n<option value="04">04</option>\n<option value="05">05</option>\n<option value="06">06</option>\n<option value="07">07</option>\n<option value="08">08</option>\n<option value="09">09</option>\n<option value="10">10</option>\n<option value="11">11</option>\n<option value="12">12</option>\n<option value="13">13</option>\n<option value="14">14</option>\n<option value="15">15</option>\n<option value="16" selected="selected">16</option>\n<option value="17">17</option>\n<option value="18">18</option>\n<option value="19">19</option>\n<option value="20">20</option>\n<option value="21">21</option>\n<option value="22">22</option>\n<option value="23">23</option>\n}
+    expected << "</select>\n"
+    expected << %(<span class="separator_hour">h</span>\n)
+    expected << %(</div>\n)
+    expected << " : "
+    expected << %(<div class="wrapper_select_minute">\n)
+    expected << %{<select id="post_updated_at_5i" name="post[updated_at(5i)]">\n}
+    expected << %{<option value="00">00</option>\n<option value="01">01</option>\n<option value="02">02</option>\n<option value="03">03</option>\n<option value="04">04</option>\n<option value="05">05</option>\n<option value="06">06</option>\n<option value="07">07</option>\n<option value="08">08</option>\n<option value="09">09</option>\n<option value="10">10</option>\n<option value="11">11</option>\n<option value="12">12</option>\n<option value="13">13</option>\n<option value="14">14</option>\n<option value="15">15</option>\n<option value="16">16</option>\n<option value="17">17</option>\n<option value="18">18</option>\n<option value="19">19</option>\n<option value="20">20</option>\n<option value="21">21</option>\n<option value="22">22</option>\n<option value="23">23</option>\n<option value="24">24</option>\n<option value="25">25</option>\n<option value="26">26</option>\n<option value="27">27</option>\n<option value="28">28</option>\n<option value="29">29</option>\n<option value="30">30</option>\n<option value="31">31</option>\n<option value="32">32</option>\n<option value="33">33</option>\n<option value="34">34</option>\n<option value="35" selected="selected">35</option>\n<option value="36">36</option>\n<option value="37">37</option>\n<option value="38">38</option>\n<option value="39">39</option>\n<option value="40">40</option>\n<option value="41">41</option>\n<option value="42">42</option>\n<option value="43">43</option>\n<option value="44">44</option>\n<option value="45">45</option>\n<option value="46">46</option>\n<option value="47">47</option>\n<option value="48">48</option>\n<option value="49">49</option>\n<option value="50">50</option>\n<option value="51">51</option>\n<option value="52">52</option>\n<option value="53">53</option>\n<option value="54">54</option>\n<option value="55">55</option>\n<option value="56">56</option>\n<option value="57">57</option>\n<option value="58">58</option>\n<option value="59">59</option>\n}
+    expected << "</select>\n"
+    expected << %(<span class="separator_minute">min</span>\n)
+    expected << %(</div>\n)
+
+    assert_dom_equal expected, datetime_select("post", "updated_at", use_separators: { wrapper_select_tag: true })
+  end
+
+  def test_datetime_select_with_custom_separator_and_wrapper_select_tag_with_options
+    @post = Post.new
+    @post.updated_at = Time.local(2004, 6, 15, 16, 35)
+
+    expected = %(<span class="foo_year">\n)
+    expected << %{<select id="post_updated_at_1i" name="post[updated_at(1i)]">\n}
+    expected << %{<option value="1999">1999</option>\n<option value="2000">2000</option>\n<option value="2001">2001</option>\n<option value="2002">2002</option>\n<option value="2003">2003</option>\n<option value="2004" selected="selected">2004</option>\n<option value="2005">2005</option>\n<option value="2006">2006</option>\n<option value="2007">2007</option>\n<option value="2008">2008</option>\n<option value="2009">2009</option>\n}
+    expected << "</select>\n"
+    expected << %(<span class="separator_year">yy</span>\n)
+    expected << %(</span>\n)
+
+    expected << %(<span class="foo_month">\n)
+    expected << %{<select id="post_updated_at_2i" name="post[updated_at(2i)]">\n}
+    expected << %{<option value="1">January</option>\n<option value="2">February</option>\n<option value="3">March</option>\n<option value="4">April</option>\n<option value="5">May</option>\n<option value="6" selected="selected">June</option>\n<option value="7">July</option>\n<option value="8">August</option>\n<option value="9">September</option>\n<option value="10">October</option>\n<option value="11">November</option>\n<option value="12">December</option>\n}
+    expected << "</select>\n"
+    expected << %(<span class="separator_month">mm</span>\n)
+    expected << %(</span>\n)
+
+    expected << %(<span class="foo_day">\n)
+    expected << %{<select id="post_updated_at_3i" name="post[updated_at(3i)]">\n}
+    expected << %{<option value="1">1</option>\n<option value="2">2</option>\n<option value="3">3</option>\n<option value="4">4</option>\n<option value="5">5</option>\n<option value="6">6</option>\n<option value="7">7</option>\n<option value="8">8</option>\n<option value="9">9</option>\n<option value="10">10</option>\n<option value="11">11</option>\n<option value="12">12</option>\n<option value="13">13</option>\n<option value="14">14</option>\n<option value="15" selected="selected">15</option>\n<option value="16">16</option>\n<option value="17">17</option>\n<option value="18">18</option>\n<option value="19">19</option>\n<option value="20">20</option>\n<option value="21">21</option>\n<option value="22">22</option>\n<option value="23">23</option>\n<option value="24">24</option>\n<option value="25">25</option>\n<option value="26">26</option>\n<option value="27">27</option>\n<option value="28">28</option>\n<option value="29">29</option>\n<option value="30">30</option>\n<option value="31">31</option>\n}
+    expected << "</select>\n"
+    expected << %(<span class="separator_day">dd</span>\n)
+    expected << %(</span>\n)
+
+    expected << " &mdash; "
+
+    expected << %(<span class="foo_hour">\n)
+    expected << %{<select id="post_updated_at_4i" name="post[updated_at(4i)]">\n}
+    expected << %{<option value="00">00</option>\n<option value="01">01</option>\n<option value="02">02</option>\n<option value="03">03</option>\n<option value="04">04</option>\n<option value="05">05</option>\n<option value="06">06</option>\n<option value="07">07</option>\n<option value="08">08</option>\n<option value="09">09</option>\n<option value="10">10</option>\n<option value="11">11</option>\n<option value="12">12</option>\n<option value="13">13</option>\n<option value="14">14</option>\n<option value="15">15</option>\n<option value="16" selected="selected">16</option>\n<option value="17">17</option>\n<option value="18">18</option>\n<option value="19">19</option>\n<option value="20">20</option>\n<option value="21">21</option>\n<option value="22">22</option>\n<option value="23">23</option>\n}
+    expected << "</select>\n"
+    expected << %(<span class="separator_hour">h</span>\n)
+    expected << %(</span>\n)
+    expected << " : "
+    expected << %(<span class="foo_minute">\n)
+    expected << %{<select id="post_updated_at_5i" name="post[updated_at(5i)]">\n}
+    expected << %{<option value="00">00</option>\n<option value="01">01</option>\n<option value="02">02</option>\n<option value="03">03</option>\n<option value="04">04</option>\n<option value="05">05</option>\n<option value="06">06</option>\n<option value="07">07</option>\n<option value="08">08</option>\n<option value="09">09</option>\n<option value="10">10</option>\n<option value="11">11</option>\n<option value="12">12</option>\n<option value="13">13</option>\n<option value="14">14</option>\n<option value="15">15</option>\n<option value="16">16</option>\n<option value="17">17</option>\n<option value="18">18</option>\n<option value="19">19</option>\n<option value="20">20</option>\n<option value="21">21</option>\n<option value="22">22</option>\n<option value="23">23</option>\n<option value="24">24</option>\n<option value="25">25</option>\n<option value="26">26</option>\n<option value="27">27</option>\n<option value="28">28</option>\n<option value="29">29</option>\n<option value="30">30</option>\n<option value="31">31</option>\n<option value="32">32</option>\n<option value="33">33</option>\n<option value="34">34</option>\n<option value="35" selected="selected">35</option>\n<option value="36">36</option>\n<option value="37">37</option>\n<option value="38">38</option>\n<option value="39">39</option>\n<option value="40">40</option>\n<option value="41">41</option>\n<option value="42">42</option>\n<option value="43">43</option>\n<option value="44">44</option>\n<option value="45">45</option>\n<option value="46">46</option>\n<option value="47">47</option>\n<option value="48">48</option>\n<option value="49">49</option>\n<option value="50">50</option>\n<option value="51">51</option>\n<option value="52">52</option>\n<option value="53">53</option>\n<option value="54">54</option>\n<option value="55">55</option>\n<option value="56">56</option>\n<option value="57">57</option>\n<option value="58">58</option>\n<option value="59">59</option>\n}
+    expected << "</select>\n"
+    expected << %(<span class="separator_minute">min</span>\n)
+    expected << %(</span>\n)
+
+    assert_dom_equal expected, datetime_select("post", "updated_at", use_separators: { wrapper_select_tag: { html_tag: :span, class_prefix: 'foo_' }})
+  end
+
   def test_date_select_with_zero_value_and_no_start_year
     expected =  %(<select id="date_first_year" name="date[first][year]">\n)
     (Date.today.year-5).upto(Date.today.year+1) { |y| expected << %(<option value="#{y}">#{y}</option>\n) }