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