Breaking up Datepicker to not_before and needed_by inputs

Date picker arrows in Support app stopped working after the migration to Dart Sass. It’s caused by a known issue in the way Dart Sass handles the icon as Unicode - sass/sass#1395 we were not able to find a workaround. Date picker are not very accessible. When users are filling the dates in the form they normally know them already (and don’t need to pick it by looking at a calendar).

Users see a  symbol instead of an arrow. There’s alt text (Next, Prev). It’s also possible to enter date manually.

This will allow us to drop dependency on jquery-ui-rails.

Due to delivery priorities, we're not converting the entire form into Design System at the moment.

app/controllers/content_advice_requests_controller.rb

@@ -20,7 +20,7 @@ def content_advice_request_params
       :urls,
       :contact_number,
       requester_attributes: %i[email name collaborator_emails],
-      time_constraint_attributes: %i[needed_by_date time_constraint_reason],
+      time_constraint_attributes: %i[needed_by_date needed_by_day needed_by_month needed_by_year time_constraint_reason],
     ).to_h
   end
 end

app/controllers/content_change_requests_controller.rb

@@ -22,7 +22,7 @@ def content_change_request_params
       :url,
       :related_urls,
       requester_attributes: %i[email name collaborator_emails],
-      time_constraint_attributes: %i[not_before_date needed_by_date time_constraint_reason needed_by_time not_before_time],
+      time_constraint_attributes: %i[not_before_day not_before_month not_before_year needed_by_date needed_by_day needed_by_month needed_by_year time_constraint_reason needed_by_time not_before_time],
     ).to_h
   end
 end

app/controllers/remove_user_requests_controller.rb

@@ -19,7 +19,7 @@ def remove_user_request_params
       :user_email,
       :reason_for_removal,
       requester_attributes: %i[email name collaborator_emails],
-      time_constraint_attributes: %i[not_before_date needed_by_date time_constraint_reason],
+      time_constraint_attributes: %i[needed_by_day needed_by_month needed_by_year time_constraint_reason not_before_day not_before_month not_before_year],
     ).to_h
   end
 end

app/models/support/requests/time_constraint.rb

@@ -4,7 +4,8 @@ module Support
   module Requests
     class TimeConstraint
       include ActiveModel::Model
-      attr_accessor :not_before_date, :not_before_time, :needed_by_date, :needed_by_time, :time_constraint_reason
+      include DesignSystemDateHelper
+      attr_accessor :not_before_day, :not_before_month, :not_before_year, :not_before_time, :needed_by_day, :needed_by_month, :needed_by_year, :needed_by_time, :time_constraint_reason
 
       validates_date :needed_by_date, allow_blank: true, on_or_after: :today
       validates_date :not_before_date, allow_blank: true, on_or_after: :today
@@ -24,6 +25,14 @@ class TimeConstraint
       validates_time :not_before_time, on_or_before: :needed_by_time, unless: proc { |c|
         [c.needed_by_date, c.needed_by_time, c.not_before_date, c.not_before_time].any?(&:blank?) || c.needed_by_date != c.not_before_date
       }
+
+      def not_before_date
+        formatted_date(not_before_day, not_before_month, not_before_year)
+      end
+
+      def needed_by_date
+        formatted_date(needed_by_day, needed_by_month, needed_by_year)
+      end
     end
   end
 end

app/views/content_advice_requests/_request_details.html.erb

@@ -57,11 +57,23 @@
     </legend>
 
     <div class="form-group">
-      <span class="form-label">
-        <%= r.label :needed_by_date, "Is there a date you need to have a response by?" %>
+      <h4>
+        <%= "Is there a date you need to have a response by?" %>
+      </h4>
+
+      <span class="govuk-date-input__item">
+        <%= 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" %>
       </span>
-      <span class="form-wrapper">
-        <%= r.text_field :needed_by_date, placeholder: "dd-mm-yyyy", value: r.object.needed_by_date, class: "input-md-2 form-control", data: { module: "calendar", format: "dd-mm-yy", min_date: 0 } %>
+
+      <span class="govuk-date-input__item">
+       <%= 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" %>
+      </span>
+
+      <span class="govuk-date-input__item">
+       <%= 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" %>
       </span>
     </div>
 

app/views/remove_user_requests/_request_details.html.erb

@@ -31,14 +31,44 @@
     </div>
 
     <%= f.fields_for :time_constraint do |r| %>
+
+      <h4>
+        <%= "MUST NOT be removed BEFORE" %>
+      </h4>
+
+      <div id="date-hint" class="govuk-hint">
+       For example, 27 3 2007
+      </div>
+
       <div class="form-group">
-        <span class="form-label">
-          <%= r.label :not_before_date, "MUST NOT be removed BEFORE" %>
-        </span>
-        <span class="form-wrapper">
-          <%= r.text_field :not_before_date, required: false, placeholder: "dd-mm-yyyy", value: r.object.not_before_date, class: "input-md-2 form-control", data: { module: "calendar", format: "dd-mm-yy", min_date: 0 } %>
-        </span>
+
+        <div class="govuk-date-input" id="not-before-date-input">
+
+          <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" %>
+            </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" %>
+            </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" %>
+            </div>
+          </div>
+
+        </div>
+
       </div>
+
     <% end %>
 
     <div class="form-group">

app/views/support/_time_constraint.html.erb

@@ -8,9 +8,22 @@
       <span class="form-label">
         <%= r.label :needed_by_date, "Deadline" %>
       </span>
-      <span class="form-wrapper">
-        <%= r.text_field :needed_by_date, required: false, placeholder: "dd-mm-yyyy", value: r.object.needed_by_date, class: "input-md-2 form-control", data: { module: "calendar", format: "dd-mm-yy", min_date: 0 } %>
+      <br>
+
+      <span class="govuk-date-input__item">
+       <%= 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" %>
+      </span>
+
+      <span class="govuk-date-input__item">
+       <%= 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" %>
       </span>
+
+      <span class="govuk-date-input__item">
+       <%= 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" %>
+      </span> 
     </div>
 
     <div class="form-group">
@@ -26,8 +39,21 @@
       <span class="form-label">
         <%= r.label :not_before_date, "Must not be published before" %>
       </span>
-      <span class="form-wrapper">
-        <%= r.text_field :not_before_date, required: false, placeholder: "dd-mm-yyyy", value: r.object.not_before_date, class: "input-md-2 form-control", data: { module: "calendar", format: "dd-mm-yy", min_date: 0 } %>
+      <br>
+
+      <span class="govuk-date-input__item">
+        <%= 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" %>
+      </span>
+
+      <span class="govuk-date-input__item">
+       <%= 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" %>
+      </span>
+
+      <span class="govuk-date-input__item">
+       <%= 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" %>
       </span>
     </div>
 

spec/features/content_advice_requests_spec.rb

@@ -37,7 +37,9 @@
       title: "Which format",
       details: "I need help to choose a format, here's my content...",
       urls: "https://www.gov.uk/x, https://www.gov.uk/y",
-      needed_by: "12-01-#{next_year}",
+      needed_by_day: "12",
+      needed_by_month: "01",
+      needed_by_year: next_year.to_s,
       reason_for_deadline: "Ministerial announcement Z",
       contact_number: "0121 111111",
     )
@@ -81,8 +83,9 @@ def user_requests_content_advice(details)
     fill_in "Title of request", with: details[:title]
     fill_in "Please explain what you would like help with", with: details[:details]
     fill_in "Relevant URLs (if applicable)", with: details[:urls]
-
-    fill_in "Is there a date you need to have a response by?", with: details[:needed_by]
+    find("#needed-by-day").set(details[:needed_by_day])
+    find("#needed-by-month").set(details[:needed_by_month])
+    find("#needed-by-year").set(details[:needed_by_year])
     fill_in "Reason for deadline", with: details[:reason_for_deadline]
     fill_in "Contact telephone number (in case we need to call you to discuss the content)",
             with: details[:contact_number]

spec/features/content_change_requests_spec.rb

@@ -61,9 +61,13 @@
       details_of_change: "Out of date XX YY",
       url: "http://gov.uk/X",
       related_urls: "http://gov.uk/welsh",
-      needed_by_date: "31-12-#{next_year}",
+      needed_by_day: "31",
+      needed_by_month: "12",
+      needed_by_year: next_year.to_s,
       needed_by_time: "13:00",
-      not_before_date: "01-12-#{next_year}",
+      not_before_day: "01",
+      not_before_month: "12",
+      not_before_year: next_year.to_s,
       not_before_time: "18:00",
       reason: "New law",
     )

spec/features/remove_user_requests_spec.rb

@@ -35,7 +35,9 @@
       user_name: "Bob",
       user_email: "[email protected]",
       reason_for_removal: "User has left the organisation",
-      not_before_date: "31-12-#{next_year}",
+      not_before_day: "31",
+      not_before_month: "12",
+      not_before_year: next_year.to_s,
     )
 
     expect(request).to have_been_made
@@ -56,7 +58,9 @@ def user_requests_removal_of_another_user(details)
       fill_in "Reason for removal", with: details[:reason_for_removal]
     end
 
-    fill_in "MUST NOT be removed BEFORE", with: details[:not_before_date]
+    find("#not-before-day").set(details[:not_before_day])
+    find("#not-before-month").set(details[:not_before_month])
+    find("#not-before-year").set(details[:not_before_year])
 
     user_submits_the_request_successfully
   end