Skip to content
This repository
Browse code

Add HTML5 input[type="time"] helper

  • Loading branch information...
commit 446940c366d588e7e895a64caf325f5f99cba0fb 1 parent b23ac93
Alex Sulim authored April 03, 2012
2  actionpack/CHANGELOG.md
Source Rendered
... ...
@@ -1,5 +1,7 @@
1 1
 ## Rails 4.0.0 (unreleased) ##
2 2
 
  3
+*   Add `time_field` and `time_field_tag` helpers which render an `input[type="time"]` tag. *Alex Soulim*
  4
+
3 5
 *   Removed old text_helper apis for highlight, excerpt and word_wrap *Jeremy Walker*
4 6
 
5 7
 *   Templates without a handler extension now raises a deprecation warning but still
17  actionpack/lib/action_view/helpers/form_helper.rb
@@ -990,6 +990,23 @@ def date_field(object_name, method, options = {})
990 990
         Tags::DateField.new(object_name, method, self, options).render
991 991
       end
992 992
 
  993
+      # Returns a text_field of type "time".
  994
+      #
  995
+      # The default value is generated by trying to call +strftime+ with "%T.%L"
  996
+      # on the objects's value. It is still possible to override that
  997
+      # by passing the "value" option.
  998
+      #
  999
+      # === Options
  1000
+      # * Accepts same options as time_field_tag
  1001
+      #
  1002
+      # === Example
  1003
+      #   time_field("task", "started_at")
  1004
+      #   # => <input id="task_started_at" name="task[started_at]" type="time" />
  1005
+      #
  1006
+      def time_field(object_name, method, options = {})
  1007
+        Tags::TimeField.new(object_name, method, self, options).render
  1008
+      end
  1009
+
993 1010
       # Returns a text_field of type "url".
994 1011
       #
995 1012
       #   url_field("user", "homepage")
11  actionpack/lib/action_view/helpers/form_tag_helper.rb
@@ -549,6 +549,17 @@ def date_field_tag(name, value = nil, options = {})
549 549
         text_field_tag(name, value, options.stringify_keys.update("type" => "date"))
550 550
       end
551 551
 
  552
+      # Creates a text field of type "time".
  553
+      #
  554
+      # === Options
  555
+      # * <tt>:min</tt> - The minimum acceptable value.
  556
+      # * <tt>:max</tt> - The maximum acceptable value.
  557
+      # * <tt>:step</tt> - The acceptable value granularity.
  558
+      # * Otherwise accepts the same options as text_field_tag.
  559
+      def time_field_tag(name, value = nil, options = {})
  560
+        text_field_tag(name, value, options.stringify_keys.update("type" => "time"))
  561
+      end
  562
+
552 563
       # Creates a text field of type "url".
553 564
       #
554 565
       # ==== Options
1  actionpack/lib/action_view/helpers/tags.rb
@@ -25,6 +25,7 @@ module Tags #:nodoc:
25 25
       autoload :TelField
26 26
       autoload :TextArea
27 27
       autoload :TextField
  28
+      autoload :TimeField
28 29
       autoload :TimeSelect
29 30
       autoload :TimeZoneSelect
30 31
       autoload :UrlField
14  actionpack/lib/action_view/helpers/tags/time_field.rb
... ...
@@ -0,0 +1,14 @@
  1
+module ActionView
  2
+  module Helpers
  3
+    module Tags
  4
+      class TimeField < TextField #:nodoc:
  5
+        def render
  6
+          options = @options.stringify_keys
  7
+          options["value"] = @options.fetch("value") { value(object).try(:strftime, "%T.%L") }
  8
+          @options = options
  9
+          super
  10
+        end
  11
+      end
  12
+    end
  13
+  end
  14
+end
26  actionpack/test/template/form_helper_test.rb
@@ -646,6 +646,32 @@ def test_date_field_with_nil_value
646 646
     assert_dom_equal(expected, date_field("post", "written_on"))
647 647
   end
648 648
 
  649
+  def test_time_field
  650
+    expected = %{<input id="post_written_on" name="post[written_on]" type="time" value="00:00:00.000" />}
  651
+    assert_dom_equal(expected, time_field("post", "written_on"))
  652
+  end
  653
+
  654
+  def test_time_field_with_datetime_value
  655
+    expected = %{<input id="post_written_on" name="post[written_on]" type="time" value="01:02:03.000" />}
  656
+    @post.written_on = DateTime.new(2004, 6, 15, 1, 2, 3)
  657
+    assert_dom_equal(expected, time_field("post", "written_on"))
  658
+  end
  659
+
  660
+  def test_time_field_with_timewithzone_value
  661
+    previous_time_zone, Time.zone = Time.zone, 'UTC'
  662
+    expected = %{<input id="post_written_on" name="post[written_on]" type="time" value="01:02:03.000" />}
  663
+    @post.written_on = Time.zone.parse('2004-06-15 01:02:03')
  664
+    assert_dom_equal(expected, time_field("post", "written_on"))
  665
+  ensure
  666
+    Time.zone = previous_time_zone
  667
+  end
  668
+
  669
+  def test_time_field_with_nil_value
  670
+    expected = %{<input id="post_written_on" name="post[written_on]" type="time" />}
  671
+    @post.written_on = nil
  672
+    assert_dom_equal(expected, time_field("post", "written_on"))
  673
+  end
  674
+
649 675
   def test_url_field
650 676
     expected = %{<input id="user_homepage" name="user[homepage]" type="url" />}
651 677
     assert_dom_equal(expected, url_field("user", "homepage"))
5  actionpack/test/template/form_tag_helper_test.rb
@@ -459,6 +459,11 @@ def test_date_field_tag
459 459
     assert_dom_equal(expected, date_field_tag("cell"))
460 460
   end
461 461
 
  462
+  def test_time_field_tag
  463
+    expected = %{<input id="cell" name="cell" type="time" />}
  464
+    assert_dom_equal(expected, time_field_tag("cell"))
  465
+  end
  466
+
462 467
   def test_url_field_tag
463 468
     expected = %{<input id="homepage" name="homepage" type="url" />}
464 469
     assert_dom_equal(expected, url_field_tag("homepage"))
8  guides/source/form_helpers.textile
Source Rendered
@@ -150,7 +150,7 @@ NOTE: Always use labels for checkbox and radio buttons. They associate text with
150 150
 
151 151
 h4. Other Helpers of Interest
152 152
 
153  
-Other form controls worth mentioning are textareas, password fields, hidden fields, search fields, telephone fields, date fields, URL fields and email fields:
  153
+Other form controls worth mentioning are textareas, password fields, hidden fields, search fields, telephone fields, date fields, time fields, URL fields and email fields:
154 154
 
155 155
 <erb>
156 156
 <%= text_area_tag(:message, "Hi, nice site", :size => "24x6") %>
@@ -161,6 +161,7 @@ Other form controls worth mentioning are textareas, password fields, hidden fiel
161 161
 <%= date_field(:user, :born_on) %>
162 162
 <%= url_field(:user, :homepage) %>
163 163
 <%= email_field(:user, :address) %>
  164
+<%= time_field(:task, :started_at) %>
164 165
 </erb>
165 166
 
166 167
 Output:
@@ -174,11 +175,12 @@ Output:
174 175
 <input id="user_born_on" name="user[born_on]" type="date" />
175 176
 <input id="user_homepage" name="user[homepage]" type="url" />
176 177
 <input id="user_address" name="user[address]" type="email" />
  178
+<input id="task_started_at" name="task[started_at]" type="time" />
177 179
 </html>
178 180
 
179 181
 Hidden inputs are not shown to the user but instead hold data like any textual input. Values inside them can be changed with JavaScript.
180 182
 
181  
-IMPORTANT: The search, telephone, date, URL, and email inputs are HTML5 controls. If you require your app to have a consistent experience in older browsers, you will need an HTML5 polyfill (provided by CSS and/or JavaScript). There is definitely "no shortage of solutions for this":https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills, although a couple of popular tools at the moment are "Modernizr":http://www.modernizr.com/ and "yepnope":http://yepnopejs.com/, which provide a simple way to add functionality based on the presence of detected HTML5 features.
  183
+IMPORTANT: The search, telephone, date, time, URL, and email inputs are HTML5 controls. If you require your app to have a consistent experience in older browsers, you will need an HTML5 polyfill (provided by CSS and/or JavaScript). There is definitely "no shortage of solutions for this":https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills, although a couple of popular tools at the moment are "Modernizr":http://www.modernizr.com/ and "yepnope":http://yepnopejs.com/, which provide a simple way to add functionality based on the presence of detected HTML5 features.
182 184
 
183 185
 TIP: If you're using password input fields (for any purpose), you might want to configure your application to prevent those parameters from being logged. You can learn about this in the "Security Guide":security.html#logging.
184 186
 
@@ -471,7 +473,7 @@ Rails _used_ to have a +country_select+ helper for choosing countries, but this
471 473
 
472 474
 h3. Using Date and Time Form Helpers
473 475
 
474  
-You can choose not to use the form helpers generating HTML5 date input fields and use the alternative date and time helpers. These date and time helpers differ from all the other form helpers in two important respects:
  476
+You can choose not to use the form helpers generating HTML5 date and time input fields and use the alternative date and time helpers. These date and time helpers differ from all the other form helpers in two important respects:
475 477
 
476 478
 # Dates and times are not representable by a single input element. Instead you have several, one for each component (year, month, day etc.) and so there is no single value in your +params+ hash with your date or time.
477 479
 # Other helpers use the +_tag+ suffix to indicate whether a helper is a barebones helper or one that operates on model objects. With dates and times, +select_date+, +select_time+ and +select_datetime+ are the barebones helpers, +date_select+, +time_select+ and +datetime_select+ are the equivalent model object helpers.

0 notes on commit 446940c

Please sign in to comment.
Something went wrong with that request. Please try again.