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.

[stevenaproctor]

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 – https://github.com/alphagov/govuk-frontend/issues/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.

[36degrees]

Hi Terry,

That sounds like a sensible improvement. Would you be interested in creating a pull request with those changes?

I think you'd need to edit…

This line to update the first example: https://github.com/alphagov/govuk-design-system/blob/master/src/patterns/dates/default/index.njk#L19

This line to update the last (error state) example: https://github.com/alphagov/govuk-design-system/blob/master/src/patterns/dates/error/index.njk#L20

And add any additional guidance to the pattern itself: https://github.com/alphagov/govuk-design-system/blob/master/src/patterns/dates/index.md.njk

Let me know if I can help at all.

Thanks,

Ollie

[terrysimpson99]

Thanks Ollie. I've never done a pull request before but I'd like to try. I'll ask a colleague for help and give it a go. Hopefully in the next week.

Terry

[dashouse]

Recording an issue from @andysellick (https://github.com/alphagov/govuk-frontend/issues/1250) and a PR from @colinrotherham (https://github.com/alphagov/govuk-frontend/pull/1257) we need to consider how this component should adapt based on available size.

While the component holds together inside a single column at our minimum supported breakpoint (320px) it will break if put inside a container smaller than this (such as a search filter panel), especially on tablet or desktop as the font size will be bigger (we are sizing the inputs with the ex unit the input width changes based on font-size).

Things to potentially consider when the space available cannot contain the 3 inputs inline:

• Stack all 3 inputs on top of each other
• Reduce space between inputs
• Change the input size (It's currently slightly oversized)
• Consider mobile breakpoint design vs limited width container design
• Consider using flexbox / grid

[paulwaitehomeoffice]

When used with a Welsh translation, the day and month fields do not have adequate spacing between them:

(Reported on Slack by Jonathan King, Content Designer at DWP)

[dashouse]

@paulwaitehomeoffice As @colinrotheram has pointed out this example appears to be from an alternate frontend. GOV.UK Frontend behaves like this:

[paulwaitehomeoffice]

@dashouse Ah, sorry, I missed that.

[philsherry]

Why are we using a pattern attribute on a number input type?

The pattern attribute is an attribute of the text, tel, email, url, password, and search input types.

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern

[36degrees]

@philsherry although it's technically invalid according to the specification, this was the best way to reliably trigger the numeric keyboard on older versions of iOS (< iOS 9.3 IIRC) – unfortunately using input type="number" doesn't do it by default.

Thankfully things have moved on, and we now have an issue open to update the date input to use inputmode, but we've been able to prioritise it yet.

[terrysimpson99]

1. The page uses '11' as a month number. I propose it's amended to bring it in line with the guidance: "If you give an example date, use 13 or more for the day and 9 or less for the month - for example ‘27 3 2007’. This helps users enter the date in the correct order and shows them they do not need to include leading zeroes." https://design-system.service.gov.uk/patterns/dates/. Is this possible?

2. When I started looking for guidance, I didn't realise it was in two places: https://design-system.service.gov.uk/patterns/dates/ and https://design-system.service.gov.uk/components/date-input/. This meant I only followed guidance on one of the pages. Perhaps others have a similar experience. What would happen if the two pages were merged?

[tbrd]

Has anyone, by any chance, implemented this as a react component?

[frankieroberto]

Couple of quick questions from me:

1) What should the error message be if the user enters a non-numeric date part (or parts), eg:

2) Should we try to parse known month strings like "March" or "DEC" or not?

[terrysimpson99]

[Whatever it is] must have a year that is a number.

The full list of error messages we use currently is:

Day field and month field blank = "Effective date must include a day and month" Day field and year field blank = "Effective date must include a day and year" Day field only contains a non-digit = "Effective date must have a day that is a number" Day field contains an unacceptable number (leading zero is acceptable) = "Effective date must have a day that is a number between 1 and 31"

Month field only is blank = "Effective date must include a month" Month and year field blank = "Effective date must include a month and year" Month field contains a non-digit = "Effective date must have a month that is a number" Month field contains an unacceptable number (leading zero is acceptable) = "Effective date must have a month that is a number between 1 and 12"

Year field only is blank = "Effective date must include a year" Year field contains a non-digit = "Effective date must have a year that is a number"

All three fields blank = "Enter an effective date"

Date not between 1 april 1993 and today = "Effective date must be between 1 April 1993 and today" Year is not four digits = "Effective date must be between 1 April 1993 and today"

We don't translate 'March' or 'DEC'. Research has been done on this topic and I saw a presentation showing significant disadvantages. Maybe somebody can give you a reference.

[Soundman32]

"Effective date must have a day that is a number" - why are you allowing them to type in non-numbers in the first place?

[anevins12]

@Soundman32 The number type is more problematic than it seems: https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/

[terrysimpson99]

Guidance on date input says "If there's more than one error, show the highest priority error message. In order of priority, show error messages about: missing or incomplete information; information that can't be correct (for example, the number '13' in the month field); information that fails validation for another reason" What it says appears generally applicable rather than only true for dates.

I raised this no Slack and the consensus appears to be that: (a) it's generally applicable and may belong in general guidance about error handling; and (b) it may need amending to reduce the chance of a user encountering one error message after another.

@StephenGill

[edwardhorsford]

Mac Voice Control (and possibly Dragon?) will insert a space after each numeral you dictate. So a user will end up typing 2 0 2 1. I suspect the majority of services would then fail this when validating.

Should the guidance explicitly state that services should strip whitespace before validating? I don't think we would have caught this if it weren't for @abbott567's great Voice Dictation guide.

[philsherry]

https://github.com/alphagov/govuk-frontend/issues/2085

[terrysimpson99]

The example on https://design-system.service.gov.uk/patterns/dates/ has hint text 'For example, 27 3 2007'. Guidance on that page states: "If you give an example date, use 13 or more for the day and 9 or less for the month - for example ‘27 3 2007’. This helps users enter the date in the correct order and shows them they do not need to include leading zeroes."

The example on this page has hint text: 'For example, 12 11 2007'. This is not consistent with the guidance.

1. This inconsistency would be eliminated if we merged 'Dates' and 'Date input'. I appreciate that's not a trivial task.
2. In the short term propose we update this page to replace 'For example, 12 11 2007' with 'For example, 27 3 2007'

[meg-thomas]

In user research, for 'send documents for a customs check' we have had a number of users expecting the date field to auto-tab, and the logs show it is one of the fields where users most often encounter errors.

Our date needs to within the last 6 months, so we have dynamic hint text that always gives a valid example date, and also meets the guidance criteria of using 13 or more for the day and 9 or less for the month.

[paulwaitehomeoffice]

we have had a number of users expecting the date field to auto-tab

I've had users expect that too, presumably because they've encountered other fields that do it.

I think WCAG 2.1 requires you to warn the user that you're going to auto-tab before you do it — see https://www.w3.org/WAI/WCAG21/Understanding/on-input.html

[joelanman]

might be a good experiment to implement auto tab (accessibly!) and see if the error rate changes

[terrysimpson99]

It gets mentioned by users from time to time in my research too.

Guidance says: "Never automatically tab users between the fields of the date input because this can be confusing and may clash with normal keyboard controls." https://design-system.service.gov.uk/components/date-input/

The reason appears to be: "At the moment, we don’t know a way to implement auto-tabbing that works for all our users." https://userresearch.blog.gov.uk/2017/04/18/why-we-care-more-about-effectiveness-than-efficiency-or-satisfaction/

[lburnett88]

In user research today we had two people mention automatic tabbing as a preference; and another person say they prefer a date picker / calendar. The info above on tabbing is interesting; but can anyone tell me about calendar picker research?

[lfdebrux]

Hi @lburnett88, there is information about calendar/date pickers in the date picker backlog entry. I hope this helps!

[frankieroberto]

The Design System page for the Date Input currently says:

More research is needed to determine the extent to which users struggle to enter months as numbers, and whether allowing them to enter months as text is helpful.

I am working on a live service called Apply for teacher training. As part of this service, candidates enter all their previous jobs and any relevant work experience. We use the Date input component, but omit the day:

We also separately ask for Date of birth:

Our service tracks all error messages shown to the user, alongside the actual input which triggered the error message, so that we can understand any usability issues. This data showed that in both types of fields, users sometimes entered months as short ("Jan") or long ("January") names instead of numbers.

Counts for start month and year of jobs / voluntary work

Month entered	Count of occurrences
July	302
June	262
May	191
September	151
Jan	143
April	119
January	106
October	93
March	71
Sep	64
August	63
Oct	62
Feb	61
November	57
Nov	47
jan	41
Dec	40
Sept	38
February	35
Aug	32
December	30
may	29
june	24
sep	21
september	21
july	18
april	18
march	16
JAN	12
feb	12
august	12
nov	12
oct	11
Jun	9
sept	9
Jul	9
october	9
january	8
DEC	6
FEB	5
JANUARY	5
MAY	5
Mar	5
AUG	5
NOV	4
november	4
OCT	4
JUNE	4
JULY	4
2009	4
feburary	3
janaury	3
february	3
Feb 18	3
SEP	3
Apr	3
Aprill	2
aug	2
0ct	2
SEPTEMBER	2
Septmeber	2
APRIL	2

Counts for months entered in Date of birth field

Month entered	Count of occurrences
August	4
January	3
May	3
JANUARY	2
April	1
Aug	1
Dec	1
DEC	1
feb	1
FEB	1
July	1
Mar	1
may	1

Whilst in most circumstances, we expect that candidates were able to quickly correct the mistake (this is slightly harder to track automatically), we judged that accepting and converting the month name and common 3 abbreviations would avoid this minor hurdle and would not have any downsides.

This change was made in this pull request: https://github.com/DFE-Digital/apply-for-teacher-training/pull/6807

The same change was also subsequently made in another service, Find a lost teacher reference number, here: https://github.com/DFE-Digital/find-a-lost-trn/pull/166

It's possible that the context of entering previous work experience, and only asking for the month and year, made users more likely to enter months using names than in other contexts. However the fact that we also saw this for date of birth (albeit much lower numbers – perhaps can recall their month of birth as number more readily?) suggests that this might also happen more generally.

[cjforms]

Thank you @frankieroberto for drawing attention to this issue.

If services adopt your suggestion, I'd be very grateful myself.

Background:

I have dyscalculia - in my case, only mild - and I find converting the word for a month into a number is challenging and nerve-wracking. The problem is worse for months in the middle of the year (June to August) and least bad for January, which I know is 1, and for December, which I know is 12.

In the context of your service, though, I'm guessing that the dominance of June and July is because the university and school years end in June or July so it's likely that jobs are more likely to start or end in those months.

For me personally, I've been forced to learn the number for the month of my birth by heart because of having to rattle of my date of birth a bazillion times in hospitals.

[terrysimpson99]

The match between month names and numbers is misleading for lots of people.

• September means 7 but is month 9
• October means 8 but is month 10
• November means 9 but is month 11
• December means 10 but is month 12

Dave Gorman has a proposal to fix that and other anomalies: https://www.youtube.com/watch?v=vunESk53r5U

[frankieroberto]

@cjforms thank you for sharing. I often find myself finger-counting to work out the month numbers for May to September too...

Silently accepting the month names doesn’t fully solve this issue though, as users won’t know they can do this, unless the hint text was also to change?

When was your passport issued? For example, 27 9 2007 or 27 Sep 2007

[cjforms]

Glad I'm not the only one @terrysimpson99

Good point @frankieroberto, I would indeed personally prefer the extra hint text but perhaps I'm near the limit of what I can suggest as a single user here. I'd probably want to test the longer text a bit more extensively than on me.

In the precise example, though, I'd want to know what format the passport actually uses because I think in this case it's got to be copied from the document not typed from the user's memory.

[calvin-lau-sig7]

We’ve chosen to prioritise ‘Choosing a date’ as one of our Upcoming components and patterns.

If you’d like to help, join the GitHub discussion page for Choosing a date. We’ve created it to make it easier for the community to discuss issues and options.

[richa-misra]

hi team,

I am looking for some help please on how to display error messages depending on whether the date fields have been left empty, invalid etc. The date-input error messages nunjucks example on the page, shows the error message as soon as the page loads, I was looking to display them on form submit. I am hoping that would be possible?

Many thanks

[emma-cuthbert]

Hi all,

FYI - on Apply for a NI number, we had feedback from a visually-impaired user who struggled with the error messages we'd used in the DOB fields (these were the standard ones in the pattern - e.g. 'Enter a valid date of birth'). He wasn't able to tell just from that message which field he'd made the error in.

As a result of his feedback, we went back and added error messages for each individual field. So for DOB the error messages are specific to the day, the month or the year, e.g:

• Enter the year you were born
• Enter a valid year using four digits (for example, 1982)

• See attachment for details of how the error messages on the DOB screen have evolved. We presented this at our GDS live assessment in August 2022. Date error messages 0_4.docx

[Kornelia-d]

is there a way to add attributes to date items, such as maxlength=2 and aria-required=true https://github.com/alphagov/govuk-design-system-backlog/issues/42#issuecomment-461501850

Was there an update on this question from 2019? Does anyone have thoughts on limiting the number of digits in fields? Why do we allow more than 2 digits for date and month and more than 4 for the year?

Update: colleagues have explained to me that it's not a good idea for reasons such as:

• if users copy and paste an entire date from somewhere into the fields
• that a client-side limit silently truncates and users might not notice
• server won't know it's been truncated and likewise can't necessarily error

[EvaHageman]

Can anyone explain to me why they've chosen the 3 separate input fields and not just 1? It's really annoying to jump from the one field to the other, I'd rather just keep typing and that it jumps automatically. Or that it's one field.

[joelanman]

3 fields with labels makes the format of the date unambiguous - the order of the fields, and doesnt require the user to think about or enter a separator (is it slash, hyphen, space?). We don't autotab as that can cause confusion and errors if people don't realise it happened