Skip to content

Add date input day, month, year and values options#6971

Open
colinrotherham wants to merge 7 commits into
alphagov:mainfrom
colinrotherham:date-input-fields
Open

Add date input day, month, year and values options#6971
colinrotherham wants to merge 7 commits into
alphagov:mainfrom
colinrotherham:date-input-fields

Conversation

@colinrotherham
Copy link
Copy Markdown
Contributor

@colinrotherham colinrotherham commented Apr 21, 2026

This PR contributes some date input changes from NHS.UK frontend to add new Nunjucks options:

  • day, month and year to customise individual items
  • values option to set item values using a single object

It closes #1154 and is based on: nhsuk/nhsuk-frontend#1869

Apologies to @joelanman as this PR re-implements #4932 without any breaking changes

Setting individual values and errors

Rather than set every items object (for day, month and year) we can now partially override the defaults

For example, setting error: true on the year item no longer requires all other item defaults to be set:

  {{ govukDateInput({
    fieldset: {
      legend: {
        text: "What is your date of birth?"
      }
    },
-   items: [
-     {
-       name: "dob-day",
-       label: "Day",
-       classes: "govuk-input--width-2"
-     },
-     {
-       name: "dob-month",
-       label: "Month",
-       classes: "govuk-input--width-2"
-     },
-     {
-       name: "dob-year",
-       label: "Year",
-       classes: "govuk-input--width-4",
-       error: true
-     }
-   ]
+   namePrefix: "dob",
+   year: {
+     error: true
+   }
  }) }}

Setting all values at once

Or when using the GOV.UK Prototype Kit, given the following data object:

{
  "dob-day": "31",
  "dob-month": "3",
  "dob-year": "1980"
}

You can now automatically set item values by passing in values: data as shown:

  {{ govukDateInput({
    fieldset: {
      legend: {
        text: "What is your date of birth?"
      }
    },
    namePrefix: "dob",
    values: data
  }) }}

@owenatgov
Copy link
Copy Markdown
Contributor

Hi @colinrotherham. This is looking great! Thanks for reimplementing this.

At the moment we're keen to keep main ring-fenced whilst we move Frontend to sass modules, for which we're planning on doing a beta release within the next couple of weeks which we want out in the world for a little while to test for any issues with our implementation. After that, pending review, we should be able to bring this in.

I'll run this past the other devs but if they're happy with this solution we can reivew this and put it on hold until we're ready to merge it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Pass values to date-input when using default items

2 participants