diff --git a/src/date-input/README.md b/src/date-input/README.md index 332fd4798f..f321c53edd 100644 --- a/src/date-input/README.md +++ b/src/date-input/README.md @@ -37,7 +37,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des Day - + @@ -46,7 +46,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des Month - + @@ -55,7 +55,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des Year - + @@ -115,7 +115,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des Day - + @@ -124,7 +124,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des Month - + @@ -133,7 +133,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des Year - + @@ -195,7 +195,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des Day - + @@ -204,7 +204,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des Month - + @@ -213,7 +213,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des Year - + @@ -274,7 +274,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des Day - + @@ -283,7 +283,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des Month - + @@ -292,7 +292,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des Year - + @@ -353,7 +353,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des Day - + @@ -362,7 +362,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des Month - + @@ -371,7 +371,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des Year - + diff --git a/src/date-input/template.njk b/src/date-input/template.njk index e8b47a45f2..47e49a7b16 100644 --- a/src/date-input/template.njk +++ b/src/date-input/template.njk @@ -16,7 +16,11 @@ "id": params.id + "-" + item.name, "classes": "govuk-c-date-input__input" + (" " + item.classes if item.classes), "name": params.name + "-" + item.name, - "value": item.value + "value": item.value, + "type": "number", + "attributes": { + "pattern": "[0-9]*" + } }) | indent(4) | trim }} {% endfor %} diff --git a/src/date-input/template.test.js b/src/date-input/template.test.js index 8887462e49..be8dabd2ca 100644 --- a/src/date-input/template.test.js +++ b/src/date-input/template.test.js @@ -82,6 +82,32 @@ describe('Date input', () => { expect($firstItems.text().trim()).toEqual('Day') }) + it('renders inputs with type="number"', () => { + const $ = render('date-input', { + items: [ + { + 'name': 'day' + } + ] + }) + + const $firstInput = $('.govuk-c-date-input__item:first-child input') + expect($firstInput.attr('type')).toEqual('number') + }) + + it('renders inputs with pattern="[0-9]*" to trigger numeric keypad on iOS', () => { + const $ = render('date-input', { + items: [ + { + 'name': 'day' + } + ] + }) + + const $firstInput = $('.govuk-c-date-input__item:first-child input') + expect($firstInput.attr('pattern')).toEqual('[0-9]*') + }) + it('renders item with implicit class for label', () => { const $ = render('date-input', { items: [ diff --git a/src/input/README.md b/src/input/README.md index 16c4b1ed13..f703619413 100644 --- a/src/input/README.md +++ b/src/input/README.md @@ -182,6 +182,18 @@ If you are using Nunjucks,then macros take the following arguments