Date picker

[robertjmccarthy]

The date picker component is live in the MoJ Design System.

Use this discussion to suggest changes and improvements to this component.

[robertjmccarthy]

Date picker (v2)

A date picker is live in the MoJ Design System. As part of the work to release the component, a number of items were identified for a version 2.

The items listed below all require consideration. It's not a confirmed list of tasks to do.

• Introduce guidance on date ranges.
• Include an example for start and end dates.
• Change the icon button to a text version.
• Change the style of the calendar icon button as it’s a non-standard style of the GOV.UK Design System button component.
• Scottish Gov date picker has a version with 3 input fields. We’re unsure if there’s a need for this, as it’s not clear in the guidance. This will need to be explored. GOV Design System date input also uses 3 input fields.
• Should we include a link in the calendar for ‘Today's date'? i.e. if having navigated 10 years in the future, do we include a link for today’s date to quickly bring the user back to today?
• From and to dates: Create example of vertically stacked date picker.
• From and to dates: Create example of horizontally stacked date picker.
• From and to dates: Configure to-date so that it defaults to the date chosen in the from-date (do this as a nice-to-have if everything else is completed).
• Coded version of examples shown in the documentation.

[helennickols]

For v2, feedback on 3 fields has also come from CD and IxD Accredited Programme team in Probation Digital.
Optional and nice-to-have: content playing back the date under the field and before submission. For example: 'This meeting is in 3 weeks' or 'This makes the person's release date 11 years away.' This could help reduce error states and could be useful for where an error is suspected but not definite. There may be accessibility issues. To explore when V2 work begins.

[murrlipp]

In v2 we should also update the hover states to be consistent with the menu item hover states in the recently released button menu.

For clarity, this would mean changing the text colour to white on hover, and the background colour from #949494 to #767676.

[RoseBrandle72]

Sophie shared a document that had some useful component guidance for date picker/date input components:
If a user types a leading zero when entering a date, this should still be accepted, as per GOV.UK guidance.

This is not currently in the MoJ date picker component guidance.

Is this still up-to-date guidance? If so, is it something we'd want to add for V2?

[robertjmccarthy]

Moving a comment from a ticket in the MoJ Design System's backlog (here).

=== START OF COMMENT ===

Feedback from @ushkarev today (in person):
Adding the date picker to a form prevents the user from submitting it with a return button. They can still submit if they tab through to submit button. CC @murrlipp @chrispymm
This was demonstrated to me in the Incentives & Incident reporting services.

=== END OF COMMENT ===

[MalcolmVonMoJ]

Date formats

I've previously dealt with date handling where we supported multiple date formats to aid users copy-pasting in from all sorts of places.

• international format (yyyy-mm-dd)
• 2-digit years (dd/mm/yy) - where 70-99 was assumed to be 20th century, and 00-69 assumed to be 21st.
• month word names
  • in both February 29, 1980 and 29 February 1980 formats
  • supporting short month names (e.g. 29 Feb 80)
  • supporting (or rather removing) ordinals (e.g. 29th February 1980 is treated as 29 February 1980)

I have looked at the code and think this is easily achievable in the same way as I did it years ago - I will raise a PR with the changes when I next have an L&D day.