Make it easier to set date values (#994)

This updates the `dateInput` component to make it easier to set the values (for example, if going back to a page), without having to set the individual items.
nhsuk · Sep 10, 2024 · 5600269 · 5600269
1 parent 09aba75
commit 5600269
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 20 deletions.
diff --git a/app/components/date-input/index.njk b/app/components/date-input/index.njk
@@ -20,21 +20,7 @@
             },
             "hint": {
               "text": "For example, 31 3 1980"
-            },
-            "items": [
-              {
-                "name": "day",
-                "classes": "nhsuk-input--width-2"
-              },
-              {
-                "name": "month",
-                "classes": "nhsuk-input--width-2"
-              },
-              {
-                "name": "year",
-                "classes": "nhsuk-input--width-4"
-              }
-            ]
+            }
           }) }}
         </div>
       </div>

diff --git a/app/components/date-input/month-and-year-with-values.njk b/app/components/date-input/month-and-year-with-values.njk
@@ -0,0 +1,45 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Date input' %}
+{% from 'components/date-input/macro.njk' import dateInput %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper" id="maincontent">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ dateInput({
+            "id": "dob",
+            "namePrefix": "dob",
+            "fieldset": {
+              "legend": {
+                "text": "When did you start your job?"
+              }
+            },
+            "hint": {
+              "text": "For example, 11 2023"
+            },
+            values: {
+              month: "8",
+              year: "2024"
+            },
+            "items": [
+              {
+                "name": "month",
+                "classes": "nhsuk-input--width-2"
+              },
+              {
+                "name": "year",
+                "classes": "nhsuk-input--width-4"
+              }
+            ]
+          }) }}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/app/components/date-input/with-values.njk b/app/components/date-input/with-values.njk
@@ -0,0 +1,36 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Date input' %}
+{% from 'components/date-input/macro.njk' import dateInput %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper" id="maincontent">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ dateInput({
+            "id": "dob",
+            "namePrefix": "dob",
+            "fieldset": {
+              "legend": {
+                "text": "What is your date of birth?"
+              }
+            },
+            "hint": {
+              "text": "For example, 31 3 1980"
+            },
+            values: {
+              day: "5",
+              month: "8",
+              year: "2024"
+            }
+          }) }}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/app/pages/examples.njk b/app/pages/examples.njk
@@ -60,6 +60,8 @@
     <li><a href="../components/date-input/autocomplete.html">Date input with autocomplete attribute</a></li>
     <li><a href="../components/date-input/error.html">Date input with error</a></li>
     <li><a href="../components/date-input/multiple-errors.html">Date input with multiple errors</a></li>
+    <li><a href="../components/date-input/with-values.html">Date input with values</a></li>
+    <li><a href="../components/date-input/month-and-year-with-values.html">Date (month and year) input with values</a></li>
     <li><a href="../components/details/index.html">Details</a></li>
     <li><a href="../components/do-dont-list/index.html">Do and Don't list</a></li>
     <li><a href="../components/error-message/index.html">Error message</a></li>

diff --git a/packages/components/date-input/README.md b/packages/components/date-input/README.md
@@ -366,6 +366,10 @@ The date input Nunjucks macro takes the following arguments:
 | **pattern**       | string | No       | Attribute to [provide a regular expression pattern](https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute), used to match allowed character combinations for the input value.                                                                                                                                                                 |
 | **classes**       | string | No       | Optional additional classes to add to the date-input container. Separate each class with a space.                                                                                                                                                                                                                                                         |
 | **attributes**    | object | No       | Any extra HTML attributes (for example data attributes) to add to the date-input component.                                                                                                                                                                                                                                                               |
+| **values**        | object | No       | An optional object use to specify value attributes for the date parts without setting rows.                                                                                                                                                                                                                                                               |
+| **values.day**    | string | No       | Value attribute for the day input.                                                                                                                                                                                                                                                                                                                        |
+| **values.month**  | string | No       | Value attribute for the month input.                                                                                                                                                                                                                                                                                                                      |
+| **values.year**   | string | No       | Value attribute for the year input.                                                                                                                                                                                                                                                                                                                       |
 
 If you are using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `html` can be a [security risk](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting). Read more about this in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).
 

diff --git a/packages/components/date-input/template.njk b/packages/components/date-input/template.njk
@@ -14,15 +14,18 @@
   {% set dateInputItems = [
     {
       name: "day",
-      classes: "nhsuk-input--width-2"
+      classes: "nhsuk-input--width-2",
+      value: params.values.day
     },
     {
       name: "month",
-      classes: "nhsuk-input--width-2"
+      classes: "nhsuk-input--width-2",
+      value: params.values.month
     },
     {
       name: "year",
-      classes: "nhsuk-input--width-4"
+      classes: "nhsuk-input--width-4",
+      value: params.values.year
     }
   ] %}
 {% endif %}
@@ -64,8 +67,8 @@
         },
         id: item.id if item.id else (params.id + "-" + item.name),
         classes: "nhsuk-date-input__input " + (item.classes if item.classes),
-        name: (params.namePrefix + "-" + item.name) if params.namePrefix else item.name,
-        value: item.value,
+        name: (params.namePrefix + "[" + item.name + "]") if params.namePrefix else item.name,
+        value: item.value or params.values[item.name],
         inputmode: item.inputmode if item.inputmode else "numeric",
         autocomplete: item.autocomplete,
         pattern: item.pattern,