Create a new date widget with dropdowns (SDC)

[shelaghm]

Problem: The current date picker has poor usability, especially for dates far in the past like date of birth. The main challenge is selecting a date and month using the calendar entry method. Typing the date with the keyboard is challenging due to missing / and adhering to the date format.

Proposed solution:

• Create a new date widget using dropdowns for day, month and year.
• Add it to the SDC catalog app as Date of Birth widget (open to other ideas)
• Keep existing date picker as is.

Alternatives: Change the existing date picker (we are proposing minor improvements in #1802) Use a different or legacy date picker (ice box issue - will create issue)

Design mocks:

[dubdabasoduba]

@shelaghm Will we make this widget configurable such that you can define with spinner comes first?

E.g if the expected date format is yyyy/mm/dd then the year spinner is the first one

[rowo]

For the existing date picker, having the / automatically added at the least would still be good to do because if you don't have that the entry seems almost unusable for these users. So it'd be nice for that to be part of the proposed solution. I think this date entry would be the most familiar one for new users.

For the second date option using drop downs, I like it though my two concerns are (1) the tap area is small (for this user) in this style drop down, and (2) the day range changes based on the month (I guess legacy spinners displaying the three columns were a way around this). But this is nice and is great for when there's a default date already entered (like today's date).

[shelaghm]

@dubdabasoduba Yes, exactly as you said. It will need to be configurable so that the developer can define their preferred date format and the dropdown sequence would shift accordingly.

@rowo Helpful to hear your feedback. Our plan is to do both, (1) add auto slashes in #1802 and (2) add this new component. It will then be very helpful to hear from you which one you end up using in your app and when/why. Very valid concerns, thanks for raising those. (1) Yes, would be ideal to have larger tap area. Alternative could be to stack vertically. (2) An alternative could be to do keyboard entry for day or year instead of a dropdown. Or validate the date after month has been entered, and an error message is then shown if the date is not a valid date.

Feel free to suggest other ideas if something comes to mind. Thanks!

[fredhersch]

@rowo How did you address this in OpenSRP?