In beta testing, we have had several people get hung up on selecting dates with the date input. After reviewing, the date input is non-intuitive and does not match USA UI date selection standards which is causing some confusion. Some flexibility on UI design would be super helpful.
A few things:
Typically, the date calendar features a left to right arrow in the top left/top right of the calendar (WeWeb uses up/down arrow)
Typically, the date does not change when you move forward/backward in the calendar (WeWeb changes the date automatically when the user switches the month)
WeWeb
Angular
Typically, for the empty state, the date input area can be entered on a keyboard with a mask that has more flexibility (WeWeb requires you to click on the first element (mm) and then move through each element. Or, click on the specific element like mm and then edit just that)
When using mm/dd/yyyy in WeWeb, the year allows for more than 4 digits
Many people were not able to realize to click on the calendar icon on the right. Angular uses a hover effect on the icon.
But how do you just type in the field. Calendar popup is good UX when the date is close to today. But dreadful ux when you have a birthdate field. In that instance, just entering text is the way to go.
Most to least important feature I would like to understand and use
How do I type even if the calendar icon is there?
Is there a way to remove the calendar?
Is there a way to set the initial filled in info to today’s date?
Is there a way to change the placeholder text and set it’s color like you can on the other input type fields?
With regards to the field accepting >4 digits years, this is a major issue as the component will simply reset the year to something like 2000 (in my tests). With regards to information security (integrity), this makes this component a no-go when the input minimally important to some business logic - you won’t know whether the date 2000-01-30 in your DB was typed as is by the user or if they typed some >4 digits year like 10980-01-30.
So, I could easily add a regex validation to prevent an invalid input of 5 digits year. However, there is some UX aspect to this: when typing in the date, once you’ve filled all of the input digits, the selection would automatically change to the next input.
For example, once you’ve typed in 2 digits for the month, it’ll automatically go to the date.
For the year however, you’ll have to type in 5 digits for the focus to switch to the month (with a YYYY/MM/DD format).
