Make it easier to set date values

nhsuk · Aug 16, 2024 · 6e8a979 · 6e8a979
1 parent 1ff76e3
commit 6e8a979
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 19 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/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,7 @@
     <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/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/template.njk b/packages/components/date-input/template.njk
@@ -13,15 +13,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 %}
@@ -63,7 +66,7 @@
         },
         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,
+        name: (params.namePrefix + "[" + item.name + "]") if params.namePrefix else item.name,
         value: item.value,
         inputmode: item.inputmode if item.inputmode else "numeric",
         autocomplete: item.autocomplete,