diff --git a/app/components/date-input/index.njk b/app/components/date-input/index.njk index b91a7c738..e2c49522d 100644 --- 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" - } - ] + } }) }} diff --git a/app/components/date-input/month-and-year-with-values.njk b/app/components/date-input/month-and-year-with-values.njk new file mode 100644 index 000000000..9cf6f56b6 --- /dev/null +++ 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 %} + +
+
+ +
+
+ {{ 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" + } + ] + }) }} +
+
+ +
+
+ +{% endblock %} diff --git a/app/components/date-input/with-values.njk b/app/components/date-input/with-values.njk new file mode 100644 index 000000000..43d24cff5 --- /dev/null +++ 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 %} + +
+
+ +
+
+ {{ 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" + } + }) }} +
+
+ +
+
+ +{% endblock %} diff --git a/app/pages/examples.njk b/app/pages/examples.njk index d36919ff8..a640b6287 100644 --- a/app/pages/examples.njk +++ b/app/pages/examples.njk @@ -60,6 +60,8 @@
  • Date input with autocomplete attribute
  • Date input with error
  • Date input with multiple errors
    • +
  • Date input with values
    • +
  • Date (month and year) input with values
  • Details
  • Do and Don't list
  • Error message
    • diff --git a/packages/components/date-input/README.md b/packages/components/date-input/README.md index 54f559f8d..ed3d50e35 100644 --- 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 index 89bb2ffbc..428c5d9d3 100644 --- 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,