Date input - Githubissues

Summary

 Date input provides a way to quickly and easily input a date, or any part of a date.

💰 User value

 Foundational component required to provide ICDS users the tools to build rich applications.

📚 User Stories

As an ICDS user I need a date input component So that I can input a date

As a date input user I need to freely type a date in text format So that I can input a date easily, without need to interact within a modal/dialogue window or dropdown

As a designer/developer creating an app that uses date inputs I need flexibility in the input format, by choosing whether the component asks for DD/MM/YYYY, MM/DD/YYYY, YYYY/MM/DD So that I can choose the relevant format for my user base

As a date input user I need to view a focus indicator for any element that can be interacted with, So that I know where my keyboard actions will target.

As a designer/developer creating an app that uses date inputs I need the choice to accept all, future, or past dates So that I limit the input to my users to prevent errors

As a date input user I need the date input component to be accessible to screen readers and keyboard-only users, So that I can use the component with assistive technology.

As a user filling in a date I need the component to have placeholder text indicating the expected format So that I can easily understand how to input the date information.

As a user filling in a date I need to still have access to the requested format intake So that I can easily understand what format to enter my date.

As an ICDS user I want the date input field to validate the entered date and display an error message if it is invalid So that I can correct my mistake and submit a valid date.

📝 Acceptance Criteria  

Given that the date input component exists  When selecting the date format  Then the following can be selected:

D-M-Y, M-D-Y, Y-M-D

—

Given that the date input component is formed by 3 separate micro-inputs (DD, MM, YYYY)  When a user fills in one field  Then there should be auto-tabbing behaviour (i.e. in a DD/MM/YYYY format, if a user types 11 in the DD field, then the field would update to 11/ and focus on the month input)

—

Given that the date input component has immediate formatting validation, and a DD/MM/YYYY format  When a user types a 4 (or any number up to, and including 9) in the DD field  Then the the auto-formatting would complete this as 04/ (or any number up to, and including 09) and move to the next micro-field (MM)

—

Given that the date input component has immediate formatting validation, and a DD/MM/YYYY format  When a user types the number 2 to 9 in the MM field  Then the the auto-formatting would correct this to 02/ to 09/ and move to the next micro-field (YYYY)

—

Given that the date input component has immediate formatting validation, and a DD/MM/YYYY format  When a user types the number any two digits, from 00 to 99

And the user loses focus of the date field  Then the the auto-formatting would append 20 as a prefix (i.e. if the user types 23, then the field would auto-format to 2023)

—

Given that the date input component has immediate formatting validation, and a DD/MM/YYYY format  When a user types 3 followed by the ‘/‘ or ‘-‘ key in the DD field  Then the DD micro-field should auto-format to 03 and focus moves on to the next micro-field

—

Given that the date input component has immediate formatting validation, and a DD/MM/YYYY format  When a user types 1 followed by the ‘/‘ or ‘-‘ key in the MM field  Then the DD micro-field should auto-format to 01 and focus moves on to the next micro-field

—

Given that the date input component has immediate formatting validation, and a DD/MM/YYYY format  When a user types any two digits 00 - 99 followed by the ‘/‘ or ‘-‘ key in the YYYY field  Then the the auto-formatting would append 20 as a prefix (i.e. if the user types 23, then the field would auto-format to 2023)

—

Given that the date input component has immediate formatting validation, only accepts numbers  When a user types in a character which is not a number 0-9  Then no character should be shown in the field

—

Given that the date input component has immediate validation of valid dates  When a user types 13 in the MM field  Then an error message should appear stating “Please enter a valid date”

—

Given that the date input component has immediate validation of valid dates  When a user types 32 - 39 in the DD field  Then an error message should appear stating “Please enter a valid date”

—

Given that the date input component has immediate validation of valid dates  When a user types in an incorrect/impossible date (i.e. 30/02/2023)  Then an error message should appear stating “Please enter a valid date”

—

Given that the date input component has immediate validation for specific rules  When a developer chooses disableDates=fromNow  Then if a user types a future date, an error message should appear stating ‘Dates in the future are not allowed. Please select a date in the past.”

—

Given that the date input component has immediate validation for specific rules  When a developer chooses disableDates=untilNow  Then if a user types a past date, an error message should appear stating ‘Dates in the past are not allowed. Please select a date in the future.”

—

Given that the date input component creates a date object  When a VO user types in the last digit of a full date  Then the voice over should read back the full date as a date object ‘i.e. The 3rd of December, 2003)

—

Validation types: Success, Warning, Error
Input type: Disabled, Filled, Active (focused), Placeholder
State: Default, Hover, Pressed, Disabled
Sizes: Default, Small
Format variants: DD/MM/YYYY, MM/DD/YYYY, YYYY/MM/DD
Validation: Error, Warning, Success, Default

✏ Designs

 Figma V2.1 File, “334 - Date input” branch

🧾 Guidance

 TBD

mi6 / ic-ui-kit

Date input #334