Allow attributes on date input items

CHANGELOG.md

@@ -20,6 +20,13 @@
 
   ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
 
+- Allow attributes on date inputs
+
+  You can now provide attributes on day/month/year inputs
+  `items: [{ attributes: { 'data-attribute': 'value' }]`
+
+  ([PR #1172](https://github.com/alphagov/govuk-frontend/pull/1172))
+
 🔧 Fixes:
 
 - Pull Request Title goes here

src/components/date-input/date-input.yaml

@@ -36,6 +36,10 @@ params:
     type: string
     required: false
     description: Classes to add to date input item.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the date input tag.
 - name: hint
   type: object
   required: false
@@ -214,3 +218,31 @@ examples:
         name: year
         classes: govuk-input--width-4
         autocomplete: bday-year
+- name: with input attributes
+  data:
+    id: dob-with-input-attributes
+    namePrefix: dob-with-input-attributes
+    fieldset:
+      legend:
+        text: What is your date of birth?
+    hint:
+      text: For example, 31 3 1980
+    items:
+      -
+        name: day
+        classes: govuk-input--width-2
+        attributes:
+          pattern: '[0-9]*'
+          data-example-day: day
+      -
+        name: month
+        classes: govuk-input--width-2
+        attributes:
+          pattern: '[0-9]*'
+          data-example-month: month
+      -
+        name: year
+        classes: govuk-input--width-4
+        attributes:
+          pattern: '[0-9]*'
+          data-example-year: year

src/components/date-input/template.njk

@@ -55,6 +55,7 @@
     {%- if params.id %} id="{{ params.id }}"{% endif %}>
     {% for item in dateInputItems %}
     <div class="govuk-date-input__item">
+      {% set attributes = item.attributes if item.attributes else { pattern: "[0-9]*" } %}
       {{ govukInput({
         label: {
           text: item.label if item.label else item.name | capitalize,
@@ -66,9 +67,7 @@
         value: item.value,
         type: "number",
         autocomplete: item.autocomplete,
-        attributes: {
-          pattern: "[0-9]*"
-        }
+        attributes: attributes
       }) | indent(6) | trim }}
     </div>
   {% endfor %}

src/components/date-input/template.test.js

@@ -74,6 +74,40 @@ describe('Date input', () => {
 
       expect($items.length).toEqual(3)
       expect($firstItemInput.attr('name')).toEqual('day')
+      expect($firstItemInput.attr('pattern')).toEqual('[0-9]*')
+    })
+
+    it('renders with item attributes', () => {
+      const $ = render('date-input', {
+        items: [
+          {
+            'name': 'day',
+            'attributes': {
+              'data-example-day': 'day'
+            }
+          },
+          {
+            'name': 'month',
+            'attributes': {
+              'data-example-month': 'month'
+            }
+          },
+          {
+            'name': 'year',
+            'attributes': {
+              'data-example-year': 'year'
+            }
+          }
+        ]
+      })
+
+      const $input1 = $('.govuk-date-input__item:nth-of-type(1) input')
+      const $input2 = $('.govuk-date-input__item:nth-of-type(2) input')
+      const $input3 = $('.govuk-date-input__item:nth-of-type(3) input')
+
+      expect($input1.attr('data-example-day')).toEqual('day')
+      expect($input2.attr('data-example-month')).toEqual('month')
+      expect($input3.attr('data-example-year')).toEqual('year')
     })
 
     it('renders item with capitalised label text', () => {