Specify numeric input mode for date fields

inputmode="numeric" is an HTML attribute that provides a hint to devices
(mainly mobile phones and tablets) to display a numeric keyboard instead of a
standard keyboard. Even though the input type is text (allowing any text
characters), inputmode="numeric" tells the browser that the field is expected
to receive numeric input.

type="text" is the default value for the <input> element, so it’s not
explicitly defined

app/views/campaign_requests/_request_details.html.erb

@@ -88,19 +88,19 @@
           <div class="govuk-date-input__item">
             <div class="govuk-form-group">
               <%= r.label :start_day, "Day", class: "govuk-label govuk-date-input__label" %>
-              <%= r.text_field :start_day, required: false, value: r.object.start_day, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "start-day" %>
+              <%= r.text_field :start_day, required: false, value: r.object.start_day, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "start-day", inputmode: "numeric" %>
             </div>
           </div>
           <div class="govuk-date-input__item">
             <div class="govuk-form-group">
                 <%= r.label :start_month, "Month", class: "govuk-label govuk-date-input__label" %>
-                <%= r.text_field :start_month, required: false, value: r.object.start_month, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "start-month" %>
+                <%= r.text_field :start_month, required: false, value: r.object.start_month, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "start-month", inputmode: "numeric" %>
             </div>
           </div>
           <div class="govuk-date-input__item">
             <div class="govuk-form-group">
               <%= r.label :start_year, "Year", class: "govuk-label govuk-date-input__label" %>
-              <%= r.text_field :start_year, required: false, value: r.object.start_year, class: "govuk-input govuk-date-input__input govuk-input--width-4", id: "start-year" %>
+              <%= r.text_field :start_year, required: false, value: r.object.start_year, class: "govuk-input govuk-date-input__input govuk-input--width-4", id: "start-year", inputmode: "numeric" %>
             </div>
           </div>
         </div>
@@ -126,19 +126,19 @@
           <div class="govuk-date-input__item">
             <div class="govuk-form-group">
                 <%= r.label :end_day, "Day", class: "govuk-label govuk-date-input__label" %>
-                <%= r.text_field :end_day, required: false, value: r.object.end_day, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "end-day" %>
+                <%= r.text_field :end_day, required: false, value: r.object.end_day, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "end-day", inputmode: "numeric" %>
             </div>
           </div>
           <div class="govuk-date-input__item">
             <div class="govuk-form-group">
               <%= r.label :end_month, "Month", class: "govuk-label govuk-date-input__label" %>
-              <%= r.text_field :end_month, required: false, value: r.object.end_month, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "end-month" %>
+              <%= r.text_field :end_month, required: false, value: r.object.end_month, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "end-month", inputmode: "numeric" %>
             </div>
           </div>
           <div class="govuk-date-input__item">
             <div class="govuk-form-group">
               <%= r.label :end_year, "Year", class: "govuk-label govuk-date-input__label" %>
-              <%= r.text_field :end_year, required: false, value: r.object.end_year, class: "govuk-input govuk-date-input__input govuk-input--width-4", id: "end-year" %>
+              <%= r.text_field :end_year, required: false, value: r.object.end_year, class: "govuk-input govuk-date-input__input govuk-input--width-4", id: "end-year", inputmode: "numeric" %>
             </div>
           </div>
         </div>
@@ -161,19 +161,19 @@
           <div class="govuk-date-input__item">
             <div class="govuk-form-group">
               <%= r.label :development_start_day, "Day", class: "govuk-label govuk-date-input__label" %>
-              <%= r.text_field :development_start_day, required: false, value: r.object.development_start_day, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "development-start-day" %>
+              <%= r.text_field :development_start_day, required: false, value: r.object.development_start_day, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "development-start-day", inputmode: "numeric" %>
             </div>
           </div>
           <div class="govuk-date-input__item">
             <div class="govuk-form-group">
               <%= r.label :development_start_month, "Month", class: "govuk-label govuk-date-input__label" %>
-              <%= r.text_field :development_start_month, required: false, value: r.object.development_start_month, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "development-start-month" %>
+              <%= r.text_field :development_start_month, required: false, value: r.object.development_start_month, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "development-start-month", inputmode: "numeric" %>
             </div>
            </div>
            <div class="govuk-date-input__item">
             <div class="govuk-form-group">
               <%= r.label :development_start_year, "Year", class: "govuk-label govuk-date-input__label" %>
-              <%= r.text_field :development_start_year, required: false, value: r.object.development_start_year, class: "govuk-input govuk-date-input__input govuk-input--width-4", id: "development-start-year" %>
+              <%= r.text_field :development_start_year, required: false, value: r.object.development_start_year, class: "govuk-input govuk-date-input__input govuk-input--width-4", id: "development-start-year", inputmode: "numeric" %>
             </div>
           </div>
         </div>

app/views/content_advice_requests/_request_details.html.erb

@@ -71,19 +71,19 @@
           <div class="govuk-date-input__item">
             <div class="govuk-form-group">
               <%= r.label :needed_by_day, "Day", class: "govuk-label govuk-date-input__label" %>
-              <%= r.text_field :needed_by_day, required: false, value: r.object.needed_by_day, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "needed-by-day" %>
+              <%= r.text_field :needed_by_day, required: false, value: r.object.needed_by_day, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "needed-by-day", inputmode: "numeric" %>
             </div>
         </div>
         <div class="govuk-date-input__item">
           <div class="govuk-form-group">
             <%= r.label :needed_by_month, "Month", class: "govuk-label govuk-date-input__label" %>
-            <%= r.text_field :needed_by_month, required: false, value: r.object.needed_by_month, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "needed-by-month" %>
+            <%= r.text_field :needed_by_month, required: false, value: r.object.needed_by_month, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "needed-by-month", inputmode: "numeric" %>
           </div>
         </div>
         <div class="govuk-date-input__item">
           <div class="govuk-form-group">
             <%= r.label :needed_by_year, "Year", class: "govuk-label govuk-date-input__label" %>
-            <%= r.text_field :needed_by_year, required: false, value: r.object.needed_by_year, class: "govuk-input govuk-date-input__input govuk-input--width-4", id: "needed-by-year" %>
+            <%= r.text_field :needed_by_year, required: false, value: r.object.needed_by_year, class: "govuk-input govuk-date-input__input govuk-input--width-4", id: "needed-by-year", inputmode: "numeric" %>
           </div>
         </div>
       </fieldset>

app/views/remove_user_requests/_request_details.html.erb

@@ -47,19 +47,19 @@
             <div class="govuk-date-input__item">
               <div class="govuk-form-group">
                 <%= r.label :not_before_day, "Day", class: "govuk-label govuk-date-input__label" %>
-                <%= r.text_field :not_before_day, required: false, value: r.object.not_before_day, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "not-before-day" %>
+                <%= r.text_field :not_before_day, required: false, value: r.object.not_before_day, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "not-before-day", inputmode: "numeric" %>
               </div>
           </div>
           <div class="govuk-date-input__item">
             <div class="govuk-form-group">
               <%= r.label :not_before_month, "Month", class: "govuk-label govuk-date-input__label" %>
-              <%= r.text_field :not_before_month, required: false, value: r.object.not_before_month, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "not-before-month" %>
+              <%= r.text_field :not_before_month, required: false, value: r.object.not_before_month, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "not-before-month", inputmode: "numeric" %>
             </div>
           </div>
           <div class="govuk-date-input__item">
             <div class="govuk-form-group">
               <%= r.label :not_before_year, "Year", class: "govuk-label govuk-date-input__label" %>
-              <%= r.text_field :not_before_year, required: false, value: r.object.not_before_year, class: "govuk-input govuk-date-input__input govuk-input--width-4", id: "not-before-year" %>
+              <%= r.text_field :not_before_year, required: false, value: r.object.not_before_year, class: "govuk-input govuk-date-input__input govuk-input--width-4", id: "not-before-year", inputmode: "numeric" %>
             </div>
           </div>
         </fieldset>

app/views/support/_time_constraint.html.erb

@@ -18,19 +18,19 @@
           <div class="govuk-date-input__item">
             <div class="govuk-form-group">
               <%= r.label :needed_by_day, "Day", class: "govuk-label govuk-date-input__label" %>
-              <%= r.text_field :needed_by_day, required: false, value: r.object.needed_by_day, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "needed-by-day" %>
+              <%= r.text_field :needed_by_day, required: false, value: r.object.needed_by_day, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "needed-by-day", inputmode: "numeric" %>
             </div>
         </div>
         <div class="govuk-date-input__item">
           <div class="govuk-form-group">
             <%= r.label :needed_by_month, "Month", class: "govuk-label govuk-date-input__label" %>
-            <%= r.text_field :needed_by_month, required: false, value: r.object.needed_by_month, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "needed-by-month" %>
+            <%= r.text_field :needed_by_month, required: false, value: r.object.needed_by_month, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "needed-by-month", inputmode: "numeric" %>
           </div>
         </div>
         <div class="govuk-date-input__item">
           <div class="govuk-form-group">
             <%= r.label :needed_by_year, "Year", class: "govuk-label govuk-date-input__label" %>
-            <%= r.text_field :needed_by_year, required: false, value: r.object.needed_by_year, class: "govuk-input govuk-date-input__input govuk-input--width-4", id: "needed-by-year" %>
+            <%= r.text_field :needed_by_year, required: false, value: r.object.needed_by_year, class: "govuk-input govuk-date-input__input govuk-input--width-4", id: "needed-by-year", inputmode: "numeric" %>
           </div>
         </div>
       </fieldset>
@@ -59,19 +59,19 @@
           <div class="govuk-date-input__item">
             <div class="govuk-form-group">
               <%= r.label :not_before_day, "Day", class: "govuk-label govuk-date-input__label" %>
-              <%= r.text_field :not_before_day, required: false, value: r.object.not_before_day, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "not-before-day" %>
+              <%= r.text_field :not_before_day, required: false, value: r.object.not_before_day, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "not-before-day", inputmode: "numeric" %>
             </div>
         </div>
         <div class="govuk-date-input__item">
           <div class="govuk-form-group">
             <%= r.label :not_before_month, "Month", class: "govuk-label govuk-date-input__label" %>
-            <%= r.text_field :not_before_month, required: false, value: r.object.not_before_month, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "not-before-month" %>
+            <%= r.text_field :not_before_month, required: false, value: r.object.not_before_month, class: "govuk-input govuk-date-input__input govuk-input--width-2", id: "not-before-month", inputmode: "numeric" %>
           </div>
         </div>
         <div class="govuk-date-input__item">
           <div class="govuk-form-group">
             <%= r.label :not_before_year, "Year", class: "govuk-label govuk-date-input__label" %>
-            <%= r.text_field :not_before_year, required: false, value: r.object.not_before_year, class: "govuk-input govuk-date-input__input govuk-input--width-4", id: "not-before-year" %>
+            <%= r.text_field :not_before_year, required: false, value: r.object.not_before_year, class: "govuk-input govuk-date-input__input govuk-input--width-4", id: "not-before-year", inputmode: "numeric" %>
           </div>
         </div>
       </fieldset>