Replacing DatePicker with Design Systems Date Input components

app/controllers/campaign_requests_controller.rb

@@ -24,9 +24,15 @@ def campaign_request_params
         full_responsibility_confirmation
         accessibility_confirmation
         cookie_and_privacy_notice_confirmation
-        start_date
-        end_date
-        development_start_date
+        start_day
+        start_month
+        start_year
+        end_day
+        end_month
+        end_year
+        development_start_day
+        development_start_month
+        development_start_year
         performance_review_contact_email
         government_theme
         description

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/helpers/design_system_date_helper.rb

@@ -0,0 +1,15 @@
+module DesignSystemDateHelper
+  def formatted_date(day, month, year)
+    return "" unless year.present? && month.present? && day.present?
+
+    return errors.add(:base, message: "The provided date is invalid.") unless year.match?(/^\d+$/)
+
+    begin
+      date = Date.strptime("#{year}-#{month}-#{day}", "%Y-%m-%d")
+      date.strftime("%d-%m-%Y")
+    rescue ArgumentError
+      errors.add :base, message: "The provided date is invalid."
+      nil
+    end
+  end
+end

app/models/support/gds/campaign.rb

@@ -4,15 +4,22 @@ module Support
   module GDS
     class Campaign
       include ActiveModel::Model
+      include DesignSystemDateHelper
       attr_accessor :has_read_guidance_confirmation,
                     :has_read_oasis_guidance_confirmation,
                     :full_responsibility_confirmation,
                     :accessibility_confirmation,
                     :cookie_and_privacy_notice_confirmation,
                     :signed_campaign,
-                    :start_date,
-                    :end_date,
-                    :development_start_date,
+                    :start_day,
+                    :start_month,
+                    :start_year,
+                    :end_day,
+                    :end_month,
+                    :end_year,
+                    :development_start_day,
+                    :development_start_month,
+                    :development_start_year,
                     :performance_review_contact_email,
                     :government_theme,
                     :description,
@@ -27,9 +34,15 @@ class Campaign
                     :ga_contact_email
 
       validates :signed_campaign,
-                :start_date,
-                :end_date,
-                :development_start_date,
+                :start_day,
+                :start_month,
+                :start_year,
+                :end_day,
+                :end_month,
+                :end_year,
+                :development_start_day,
+                :development_start_month,
+                :development_start_year,
                 :performance_review_contact_email,
                 :government_theme,
                 :description,
@@ -50,14 +63,25 @@ class Campaign
                 :accessibility_confirmation,
                 :cookie_and_privacy_notice_confirmation,
                 acceptance: { allow_nil: false, accept: "Yes" }
-
       validates_date :start_date, on_or_after: :today
       validates_date :end_date, after: :start_date
       validates_date :development_start_date, on_or_before: :start_date
       validates :proposed_url, format: /((http|https):\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.(campaign\.)?gov.uk?/
 
       VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i
       validates :performance_review_contact_email, :ga_contact_email, format: { with: VALID_EMAIL_REGEX }
+
+      def start_date
+        formatted_date(start_day, start_month, start_year)
+      end
+
+      def end_date
+        formatted_date(end_day, end_month, end_year)
+      end
+
+      def development_start_date
+        formatted_date(development_start_day, development_start_month, development_start_year)
+      end
     end
   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/campaign_requests/_request_details.html.erb

@@ -78,8 +78,22 @@
           Start date of campaign site<abbr title="required">*</abbr>
         <% end %>
       </span>
-      <span class="form-wrapper">
-        <%= r.text_field :start_date, required: true, aria: { required: true }, placeholder: "dd-mm-yyyy", value: r.object.start_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 :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" %>
+      </span>
+
+      <span class="govuk-date-input__item">
+       <%= 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" %>
+      </span>
+
+      <span class="govuk-date-input__item">
+       <%= 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" %>
       </span>
       <p class="help-block">
         Once your site is live, you should allow time for testing before driving traffic to it. We advise leaving 1-2 days for no-cost campaigns, and at least a week for paid advertising campaigns.
@@ -92,9 +106,24 @@
           Proposed end date of campaign site<abbr title="required">*</abbr>
         <% end %>
       </span>
-      <span class="form-wrapper">
-        <%= r.text_field :end_date, required: true, aria: { required: true }, placeholder: "dd-mm-yyyy", value: r.object.end_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 :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" %>
+      </span>
+
+      <span class="govuk-date-input__item">
+       <%= 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" %>
       </span>
+
+      <span class="govuk-date-input__item">
+       <%= 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" %>
+      </span>
+
     </div>
 
     <div class="form-group">
@@ -103,9 +132,24 @@
           Site build to commence on<abbr title="required">*</abbr>
         <% end %>
       </span>
-      <span class="form-wrapper">
-        <%= r.text_field :development_start_date, required: true, aria: { required: true }, placeholder: "dd-mm-yyyy", value: r.object.development_start_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 :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" %>
       </span>
+
+      <span class="govuk-date-input__item">
+       <%= 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" %>
+      </span>
+
+      <span class="govuk-date-input__item">
+       <%= 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" %>
+      </span>
+
     </div>
     <p class="help-block">
       We expect the website to go live within 1 month of approval

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/layouts/application.html.erb

@@ -10,6 +10,7 @@
   <%= csrf_meta_tag %>
   <%= csp_meta_tag %>
   <%= stylesheet_link_tag "legacy/application", :media => "all" %>
+  <%= stylesheet_link_tag "application", :media => "all" %>
   <%= javascript_include_tag "legacy/application" %>
   <%= javascript_include_tag 'es6-components', type: "module" %>
 <% end %>

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>