Energy-Saving-Trust / Design-System

A library of reusable components, patterns, and examples that embrace modern product design practices. Additionally, a collection of in-house standards, guidelines, and principles for creating inclusive, user-friendly, and effective products and services.
https://design-system-test-preview.pages.dev
1 stars 0 forks source link

Date picker - logic for edge cases and autoformatting #36

Closed elisa-est closed 1 month ago

elisa-est commented 1 month ago

Overarching question: do we want to provide live feedback and restrictions on how they enter dates? Or wait until they submit the form to display any sort of feedback?

If providing live feedback: Below are my suggestions for how we could best ensure users are able to enter the date in the required format, and can see and know which date they selected.

This is important as there's many different ways dates are written and entered across platforms. Providing support to autocorrect and restrict users from entering incorrect dates will ensure they use this with minimal frustration.

Please feel free to add to this list or offer alternatives that achieve this same goal.

1. When a user enters in incorrectly formatted number 'auto correct' it to the required format.

Examples:

1a If user enters a string of numbers without dashes or spaces '03032024' convert to a date format.

1b If a user enters a string of numbers with a dash '03-03-2024' convert to date format with /'

1c Don't let a user enter more numbers than the date allows '030320242024'

1d If a user enters the year as 2 numbers convert it to a full year (currently does this) but also display a message confirming the year so they're aware which year was entered.

2. Always display dates with same number of digits.

Example: below if the day is a single digit display as '09' even if the user enters '9' image

3. Always display the month above the year image Currently shorter month names display alongside the year. image

4. Fix next arrows right now one of the arrows doesn't change to white on the dark background for this one. image

5. When the user enters the year as only the last 2 digits, auto complete it to show the full year. Otherwise we could run into cases where someone entered a date as '24' and meant the year '1994' but it is actually registering it as 2024. This is particularly important as users often are entering in dates for old houses or buildings, where this is would be a likely occurrence.

image

elisa-est commented 1 month ago

Date picker (bugs) picked up by Karol 1. add a disabled status so can't select a block if there's no date image 2. week should start on Monday not Sunday (starting on Sunday is US centric) 3. needs to accommodate 6 rows if dates fall such that there are 6 rows for weeks image