Date of Birth handling with modern form control

[shauke]

Implement the Date of Birth (Birthday) handling for

• [ ] registration
• [ ] edit profile
• [ ] profile settings display

The code already contains some commented out functionality for this (with 3 select boxes for day, month, year) that should be replaced by a modern date picker instead. Issues to consider:

• browser date input support for native mobile device support
• localizable date format support (english vs. german, etc.)

ToDos

• [ ] select 3rd party date picker (if possible)
• [ ] remove unused/not needed code

[M-Behr]

These form controls are recommended in the mentioned article to ensure a good user experience:

We would like to use the second variant: a combination of drop-down and numerical input to minimize the number of mistakes. I think the difference between month and day format is more clear. I suggest following validation:

• If user enter 1 of 3 fields and other fields are not filled out, an error message is displayed.
• If an invalid number for day (over 31) or year (below 1900 or over 2021) is used, display the error message.
• If user enters a 9 in day field and tabs to next field, please display 09 (2-digits) automatically in the field. The year should be 4-digits. Otherwise display the error message.

Error message: The date of birth is invalid. Please check the date. I prefer to display the error message after leaving the year field, but it is also possible to validate the date after submitting the form.

[M-Behr]

@shauke: If you absolutely want to reuse the date picker, then we have to think about some configurations:

• we need to display the last 80 years in the selectbox for the year of birth - the select box should be scrollable and need a fix height.
• days of the week don't matter, we could hide them.
• today should not be selected - maybe you could show today's date 18 years ago as default calendar page, so you don't have to click all the way back - but I am not sure, if this feels weird.

I think it is still faster to just type in the date. Only entering the / takes a little time. Could these already remain fixed in the input field?

[shauke]

NOTE: ControlValueAccessor - could be used here (see user-roles-selection.component.ts).