amotl
March 2, 2021, 7:43pm
2
I just tried to figure out whether others are already experiencing such woes and to come up with the right jargon. Indeed, I have been able to find some references so I will just quote them here for reference.
The problem I am having is I want to use a typable input as well as the datepicker, but when I type into this input field it fires the keyup event which triggers its v-on:selected event.
Meaning if I start typing in ‘2012-02-02’ with it submits on ever key up.
Usually this would be easy to solve as you can use a .length but this vue component always hands back a Date that is parsed. So that won’t work.
I have the idea to deconstruct the component and build my own but was hoping someone might have an idea for a different solution
– https://stackoverflow.com/questions/56890586/vuejs-datepicker-typeable-input-submit-delay
After quickly scanning through this excellent article by Vitaly Friedman, I well recognize that improving the UX on those aspects might be harder than expected.
[…]
Well, numerical input has to be reliable enough to manage all kinds of edge cases — and there are plenty of them. Of course, we’ll be using some sort of a label or placeholder to indicate the order of the day, month and year input and an example of the input format, but inline validation should pick up an ill-formatted input quickly and suggest corrections to drive the user forward in the input flow.
[…]
Now, how would users type in the data when encountering that numerical input? If you observe users typing in a date in an input, you’ll see them pause for a second, type in 1 , then manually switch to the month input, type 3 , then manually switch to the year input and type the year — either 19 or 2019 .
Other users will play it safe and type in 03 and 01 explicitly. Still others will try to include a separator sign in either of these inputs. Because in some implementations the placeholder disappears once the input is activated, some users will use a different separator sign than the one you’ve accounted for — often a hyphen ( - ) or slash ( / ). Some users will try to increment the value by using the up and down arrows in the input fields. And some users will choose to tab through the fields when typing in the date. Oh, what a nightmare it is for inline validation!
[…]
– Designing The Perfect Date And Time Picker — Smashing Magazine