Date input

[govuk-design-system]

Use this issue to discuss this component in the GOV.UK Design System.

Anything else

Related to the 'date picker' component issue

[davehaigh]

Consider how some users might be entering a date from reading it off material where it's displayed as letters. e.g. a passport.

so consider allowing various formats for month e.g. 3, 03, MAR and MARCH

in our testing we see users enter months as numbers

[manalishi79]

There used to be documentation with this component explaining a hack to make inputs work as users expected in iOS (specifically activating the numeric keyboard on number inputs). Is this still relevant? I notice it's not in the current page

[36degrees]

There used to be documentation with this component explaining a hack to make inputs work as users expected in iOS (specifically activating the numeric keyboard on number inputs). Is this still relevant? I notice it's not in the current page

Hi Paul,

It's still relevant – I believe that guidance was removed because we are now providing code examples, which we were not able to do when this content was in the service manual, and so it was more important to document 'implementation details' like that.

The code examples on the date input all use the pattern="[0-9]*" attribute, which triggers the keyboard on iOS.

[charge-valtech]

Testing the "Apply for a Blue Badge" service. We saw two users with Voiceover on iOS run into issues when entering their date of birth. The first user expected it to auto-tab, getting stuck in the day field and then had issues getting back into the month field. The second user wasn't sure of what to do after entering the day, they said “I didn’t hear that one. Do I have to put dot there for month? Oh I have to go, ok. I’ve just done the day, and then” he then tried to find the dot button and gets stuck in the International keyboard, swiping the screen he finds year… swipes the screen until he finds the month input “I just want to go to month”.

[Soundman32]

I don't think the documentation specifically shows how to display a formatted date. It has "31 3 1980" in the examples, but this is not specifically spelt out in date patterns or a-z style guide. One of the reasons this has come up is that in my 30 years of non-government development, I've never come across a date format (anywhere in the world) where spaces are the separator!

[jfhector]

Hello all. I'd like to understand why the text input based date picker is more usable / accessible than more a select element, or a calendar. Could you tell me or point me in the right direction?

I remember that there's been usability findings pointing to that direction, but it'd help me to understand what the these findings so I can be convinced myself and convince colleagues. Is there an article / blog post anywhere recapping on this?

(Thanks for the excellent work on the design system and its documentation).

[joelanman]

Hi @jfhector that's a good question, you can read some research here:

https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date-of-birth/

We found similar problems with dropdowns regularly, which is why we generally recommend against them.

In terms of calendar controls, we haven't found a need when it comes to asking for a memorable date (like a date of birth), though it could be useful in other situations. The problem then is, if you use built-in browser calendars the user experience can vary wildly. If you use a custom calendar control you need to make sure it's fully accessible.

[ghost]

I always point people at @alicebartlett's talk about dropdowns from 2014. https://www.youtube.com/watch?v=CUkMCQR4TpY&t=1s

[jfhector]

Thanks a lot @joelanman @stevenaproctor , really helpful.

[joelanman]

@jfhector there is a thread on a possible date picker/calendar control here

[jonathaninch]

Have any prototypes / services considered a 'today' option on a date entry screen, so a user can - for example - select a 'today' radio button rather than enter data into the date fields under it? I realise it would often be inappropriate but for some services where a user can cancel / deregister on that particular day it might be helpful?

[HughePaul]

is there a way to add attributes to date items, such as maxlength=2 and aria-required=true

[36degrees]

is there a way to add attributes to date items, such as maxlength=2 and aria-required=true

This isn't possible using the macros at the minute – this is being tracked as an issue in the GOV.UK Frontend repo – alphagov/govuk-frontend#995.

If you're using the HTML directly, then you can add the attributes as you normally would.

[manalishi79]

While testing this pattern in the design system with Safari and Voiceover, I've noticed that the text inputs offer a number input as an incrementable input (stepper). I can't see how this input format is described in the markup.

[terrysimpson99]

At https://design-system.service.gov.uk/patterns/dates/ the first example is '01 08 2007' and the second example is '31 3 1980'. This is a minor inconsistency but we should fix it.

I've encountered users who believe they must use leading zeros because it's in the example on the service they're using. Even though the day and month are labelled, I think it's beneficial for the example to emphasise the distinction between day and month by using a day number that can't be a month number.

I propose the guidance is updated as follows:

1. Day and month fields should accept input with and without leading zeros
2. The example month number should illustrate a leading zero isn't mandatory i.e in the range 1 to 9.
3. The example day number should illustrate it's day before month rather then month before day i.e. in the range 13 to 31
4. The examples in the guidance should be updated to reflect the above.

[tomyems]

I've made a bit of progress in thinking about this, and have some thoughts to suggest updates to the guidance on date input based on the flow chart. I've added some decision help guidance, it's not super helpful in terms of answers or necessarily complete, but at least should get service teams thinking about it.

Additions to date input shown not in quotes. #3956 has full diff.

If nothing is entered

Highlight the date input as a whole.

Say ‘Enter [whatever it is]’. For example, ‘Enter your date of birth’.

If the date is incomplete

Highlight the day, month or year field where the information is missing or incomplete. If more than one field is missing information, highlight the fields the user needs to fill in.

Say ‘[whatever it is] must include a [whatever is missing]’.

For example, ‘Date of birth must include a month’, ‘Date of birth must include a day and month’ or ‘Year must include 4 numbers’.

Consider that a user might intentionally leave part of the date blank because they do not know the exact day, or they remember the day and month but not the year. Could you provide more help to these users?

If the day, month or year cannot be correct

Accept all unambiguous inputs.

For day, accept:

• the numbers 1 to 31
• single digits with a leading zero, 01 to 09
• ordinals, 1st, 2nd, ... 31st
• ordinals written, first, second, ... thirty-first

For month, accept:

• the numbers 1 to 12
• single digits with a leading zero, 01 to 09
• English long month names, January, February ... December
• English short month names, Jan, Feb, ... Dec

For day ordinals, and month names, accept any case. For example, 'jan', 'JAN', 'Jan'.

For year, accept any 4 digits.

If day cannot be correct but month and year can, say: ‘Day must be a number between 1 and 31’
If month cannot be correct, by day and year can, say: ‘Month must be a number between 1 and 12’
If year cannot be correct, but day and month can, say: ‘Year must include 4 numbers’

If more than one of day, month and year cannot be correct, then combine the error messages. For example, if day and month cannot be correct, but year can say: ‘Day must be a number between 1 and 31. Month must be a number between 1 and 12.’

If day, month and year all cannot be correct, say: ‘Day must be a number between 1 and 31. Month must be a number between 1 and 12. Year must include 4 numbers.’

Highlight the day, month or year fields with the information that cannot be correct.

If the date as a whole does not exist

If the month is April, June, September, November, then check the day is between 1 and 30. If not, say ‘Day must be a number between 1 and 30 for [month]’. Highlight the day and month.

If the month is February and the year is a leap year, then check the day is between 1 and 29. If not, say ‘Day must be a number between 1 and 29 for February [year]’. Highlight the date input as a whole.

If the month is February and the year is not a leap year, then check the day is between 1 and 28. If not, say ‘Day must be a number between 1 and 28 for February [year]’. Highlight the date input as a whole.

If the date is in the future when it needs to be in the past

Highlight the date input as a whole.

Say ‘[whatever it is] must be in the past’. For example, ‘Date of birth must be in the past’.

If the date is in the future when it needs to be today or in the past

Highlight the date input as a whole.

Say ‘[whatever it is] must be today or in the past’. For example, ‘Date of birth must be today or in the past’.

If the date is in the past when it needs to be in the future

Highlight the date input as a whole.

Say ‘[whatever it is] must be in the future’. For example, ‘The date your course ends must be in the future’.

If the date is in the past when it needs to be today or in the future

Highlight the date input as a whole.

Say ‘[whatever it is] must be today or in the future’. For example, ‘The date your course ends must be today or in the future’.

If the date must be the same as or after another date

Highlight the date input as a whole.

Say ‘[whatever it is] must be the same as or after [date and optional description]’. For example, ‘The date your course ends must be the same as or after 1 September 2017 when you started the course’.

Consider that the other date, in this example 1 September 2017, might be wrong instead. If this is possible, provide help to users to change this date too.

If the date must be after another date

Highlight the date input as a whole.

Say ‘[whatever it is] must be after [date and optional description]’. For example, ‘The day your course ends must be after 1 September 2017’.

Consider that the other date, in this example 1 September 2017, might be wrong instead. If this is possible, provide help to users to change this date too.

If the date must be the same as or before another date

Highlight the date input as a whole.

Say ‘[whatever it is] must be the same as or before [date and optional description]’. For example, ‘The date of Gordon’s last exam must be the same as or before 31 August 2017 when they left school’.

Consider that the other date, in this example 31 August 2017, might be wrong instead. If this is possible, provide help to users to change this date too.

If the date must be before another date

Highlight the date input as a whole.

Say ‘[whatever it is] must be before [date and optional description]’. For example, ‘The date of Gordon’s last exam must be the same as or before 31 August 2017’.

Consider that the other date, in this example 31 August 2017, might be wrong instead. If this is possible, provide help to users to change this date too.

If the date must be between two dates

Highlight the date input as a whole.

Say ‘[whatever it is] must be between [date] and [date and optional description]’. For example, ‘The date your contract started must be between 1 September 2017 and 30 September 2017 when you were self-employed’.

Consider that these dates, in this example 1 September 2017 and 30 September 2017, might be wrong instead. If this is possible, provide help to users to change these dates too.

[rjmunro]

The guide at https://design-system.service.gov.uk/patterns/dates/ has a section on "relative dates", like today, tomorrow or yesterday, but doesn't show an example of how this should be done. Should it be integrated with the normal date input - e.g. click a "today" link or button and it auto-fills the date, or is it talking about using a different component completely?

I'm using a gov.uk page where I have to enter an event, including it's date with the date component. Because I'm efficient, I'll always enter it as it happens, or at worst the day after. Having to look up and re-type the date each time is really annoying.

[LeoCie]

What is the preferred way (in nunjucks) to group govukDateInput using a fieldset that has a legend which is the page heading, if you also have text to help users that sits between the heading and the hint?

We are asking one question per page, so are trying to follow: https://design-system.service.gov.uk/get-started/labels-legends-headings/

We want a fieldset to group these inputs.

Here is my page, I'm struggling on how we can follow these points if there is text between the header and hint:

Would the approach be to add a fieldset to the govukDateInput which has the same text as the heading, but is visually hidden?

[joelanman]

@LeoCie I wonder if this is a case where it would go in the Details component below? Isn't not knowing your date of birth covered by I cannot provide a date of birth?

[oddjones]

Would be great to be able to add attributes to the fieldset / legend or inputs within the nunjucks macro - I'm using data attributes on the fieldset to tell my application how I'd like to render the output from the component when it gets to summary time - but currently I have to hand-crank the HTML for these components - not a biggie but not difficult to fix either...

[Jdoyle286]

In testing date inputs for a pension-age benefit application, most of our users expected the selection to auto-tab between fields. Because many were not touch typing and were looking at the keyboard, they didn’t notice they had entered the full date (DDMMYYYY) into a single field.

They then found it difficult to correct, especially when the input overflowed the visible field. Some struggled to place the cursor and deleted characters one at a time, which was slow and frustrating.

We know auto-tab should be avoided for accessibility. We were considering using maxlength to limit input, but are aware this risks silent failure if users keep typing.

Has anyone explored this trade-off or found better approaches for pension age customers?

[rjmunro]

@Jdoyle286 Maybe if you enter a whole date in the day field then when you tab it could realise and fix it, i.e. move the extra digits to the other fields for you and move the cursor to the next tab position after the date input.

[joelanman]

@Jdoyle286 just to double check - are they entering a separator (like / ) or are they just typing DDMMYYYY and expecting autotab? I'm just thinking if they are typing / you could consider tabbing then

[frankieroberto]

I’ve seen similar expectations of auto-tabbing after entering 2 digits. However I’ve not yet observed it being unrecoverable, more of a minor annoyance or unmet expectation.

I’ve considered having it auto-tab only when you enter a 3rd digit into the day or month input (and the it’d move that 3rd digit in). Alternatively we could explore auto-tabbing after 2 digits, but with some debouncing to prevent tabbing twice if the user also pressed tab at the same time. Would have to consider any other unexpected side-effects though!

[cjforms]

I've seen this a lot, especially with people who need to look at the keyboard as they type.

Agree with @rjmunro - if you get more input in the first field that you expect, could this get distributed to the other fields without hassling the user about it?

[stagarz]

We have observed these issues with our internal service users, who also use a plethora of other systems that do not require tabbing (so they need to develop two sets of “muscle memory” and remember to apply the correct one on the correct service).

We have therefore developed a (fully accessible) new date component, which does not require tabbing and users can also paste copied dates into it (often a user need for them). It also has a date picker, which meets a different user need, present in some scenarios.

It has tested exceptionally well on prototypes and it’s a highly anticipated service improvement. I believe that the the current 3-box component is no longer fit for purpose for government services (definitely not for frequently used internal services) and would love to see it updated with something like this:
https://github.com/BarryJacobs/react-govuk-datepicker

[frankieroberto]

@stagarz thanks for sharing. Out of interest, do you have auto-tabbing on any other fields, or is it just dates?

And does your auto-tabbing date component prevent accidental double-tabbing in any way (ie if the user presses the tab button at around the same time the auto-tabbing happens)?

[querkmachine]

It has tested exceptionally well on prototypes and it’s a highly anticipated service improvement. I believe that the the current 3-box component is no longer fit for purpose for government services (definitely not for frequently used internal services) and would love to see it updated with something like this: BarryJacobs/react-govuk-datepicker

@stagarz This feels like a bit of a blanket statement! There are situations in which having a date picker is not a useful or appropriate way to ask for a date, such dates well into the past, such as a date of birth, or inputs that permit a level of vagueness, such as only requiring a month and year.

I personally have some qualms with the example there, though those seem to be inherited from the Scottish Government component. Mainly that there is no explicit mention of what date format to use—it's implied by the hint, but not explicitly stated, which seems more likely to create errors—and the rather unusual disconnect of defaulting to a UK date format whilst the picker uses US calendar formatting.¹

USWDS does use a single text input and date picker combination, similar to that example, but found that users of assistive technology often struggled to enter dates correctly: uswds/uswds#5534

I think that, if we were to implement a date picker, we would likely still retain the separate inputs so that each part can be explicitly labelled and keep the ability to provide granular input and validation, as the current component does.

Footnotes

1. These are issues that have genuinely caused me to input dates incorrectly before, including one time spending the night sleeping in the entrance of Heathrow Terminal 4 because the hotel I'd booked used a US formatted date picker. 🙃 Fun night. ↩

[stagarz]

@querkmachine the date picker is optional (and I agree, only useful is certain scenarios).

The format is communicated when the field is empty.

Admittedly, the format would never be an issue for our internal service users. It would be great if this component could be tested in more contexts to see how well it works and/or how it could be iterated (so we can move away from the 3-box component and all its widespread reported issues)

[stagarz]

@frankieroberto we don’t use auto-tabbing anywhere and I would argue not even in this date component - as it’s one component and not 3 (tab would take users away from the date component). Keyboard arrows and mouse clicks can help users navigate to the different parts of the date (e.g. to correct the month when entering the year)

I’m not an accessibility expert and the appropriate scrutiny is required to make it watertight (I may have jumped the gun with the “fully accessible” statement above).