Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Date input #42

Open
govuk-design-system opened this issue Jan 12, 2018 · 21 comments

Comments

@govuk-design-system
Copy link
Collaborator

commented Jan 12, 2018

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

Anything else

Related to the 'date picker' component issue

@govuk-design-system govuk-design-system created this issue from a note in GOV.UK Design System Community Backlog (In progress) Jan 12, 2018

@govuk-design-system govuk-design-system moved this from In progress to Published in GOV.UK Design System Community Backlog Jan 12, 2018

@timpaul timpaul added the component label May 21, 2018

This was referenced Jun 13, 2018
@davehaigh

This comment has been minimized.

Copy link

commented Jul 13, 2018

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

This comment has been minimized.

Copy link

commented Aug 1, 2018

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

This comment has been minimized.

Copy link

commented Aug 2, 2018

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

This comment has been minimized.

Copy link

commented Aug 22, 2018

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

This comment has been minimized.

Copy link

commented Oct 8, 2018

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

This comment has been minimized.

Copy link

commented Oct 23, 2018

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

This comment has been minimized.

Copy link
Member

commented Oct 24, 2018

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

This comment has been minimized.

Copy link

commented Oct 24, 2018

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

@jfhector

This comment has been minimized.

Copy link

commented Oct 24, 2018

Thanks a lot @joelanman @stevenaproctor , really helpful.

@joelanman

This comment has been minimized.

@jonathaninch

This comment has been minimized.

Copy link

commented Nov 6, 2018

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?

@dashouse dashouse referenced this issue Nov 15, 2018
@HughePaul

This comment has been minimized.

Copy link

commented Feb 7, 2019

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

@36degrees

This comment has been minimized.

Copy link

commented Feb 8, 2019

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

This comment has been minimized.

Copy link

commented Feb 12, 2019

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

This comment has been minimized.

Copy link

commented Apr 1, 2019

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

This comment has been minimized.

Copy link

commented Apr 15, 2019

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

This comment has been minimized.

Copy link

commented Apr 16, 2019

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

This comment has been minimized.

Copy link

commented Apr 17, 2019

Recording an issue from @andysellick (alphagov/govuk-frontend#1250) and a PR from @colinrotherham (alphagov/govuk-frontend#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

This comment has been minimized.

Copy link

commented Apr 23, 2019

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

welsh

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

@dashouse

This comment has been minimized.

Copy link

commented Apr 23, 2019

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

Screen Shot 2019-04-23 at 13 26 23

@paulwaitehomeoffice

This comment has been minimized.

Copy link

commented Apr 23, 2019

@dashouse Ah, sorry, I missed that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.