Date input

Nobody has claimed this yet.

## 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”

using similar logic to here: https://www.hectane.com/blog/javascript-date-validation-with-leap-year

—

*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