intershop / intershop-pwa

The Intershop PWA is an Angular based progressive web app storefront for the Intershop Commerce Platform.
https://www.intershop.com/progressive-web-app
MIT License
159 stars 85 forks source link

Input masking for checkout (desired delivery date, expiration date, IBAN) #1645

Closed M-Behr closed 6 months ago

M-Behr commented 7 months ago

Is your feature request related to a problem? If yes, please describe it.

Use input masking for checkout to complete dates or payment information easily while user is typing. Currently it is used for budgets and price notifications. Consistent behavior would be great.

Describe the desired solution.

Enter "/" or "." or "blanks" to match the syntax for following fields: Desired delivery date (en): only numbers are valid, add / after entering one number: xxxx --> x/x/xx Desired delivery date (de): only numbers are valid, add . after entering two numbers: xxxxxx --> xx.xx.xx Desired delivery date (fr): only numbers are valid, add / after entering two numbers: xxxxxx --> xx/xx/xx Expiration date: only numbers are valid, add . after entering two numbers: xxxx --> xx/xx IBAN: only numbers an letters are valid, add "blank" after entering 4 characters: xxxxxxxxxxxxxx --> xxxx xxxx xxxx xxxx xxx BIC: only numbers an letters are valid

Provide additional context.

Examples: Desired delivery date (en): 5/6/24 Desired delivery date (de): 05.06.24 Desired delivery date (fr): 05/06/24 Expiration date: 12/24 IBAN: DE21 3500 0000 0023 5600 BIC: BILADEM2009

Note: Phone number is no option because the format depends on country and not language. No general rule possible, too much options.

AB#96199