Admin » Dashboard » Reports: User interface improvements for the datetime picker

[amotl (Andreas Motl)]

Dear Discourse team,

first things first: As always, we are still highly impressed about the quality of the Discourse software and the spirit and love you are pouring into it. We can’t imagine running our communities on https://community.hiveeyes.org/ and https://community.panodata.org/ without it. We appreciate your efforts very much.

This is just a humble report about a minor thing we have been observing for some time already which is still present on our current 2.7.0.beta1 installations. We know your obligations might still be on very much harder problems running the maintenance of Discourse, so this report is really just for the records.

When going to the Reports pages within the Admin section of Discourse and trying to pick a datetime range by using the keyboard (i.e. trying to overwrite the year – e.g. 2019)…

… we are regularly experiencing the page to bail out because the action applying our typing will respond too quickly before waiting for it to complete. More often than not, this will lead to such a response because the data coming back from the selected datetime range will probably be too large to be processed quickly enough.

Maybe this is something that could be improved by applying some idle timeout or delay to the user’s typing?

With kind regards,
Andreas.

[amotl (Andreas Motl)]

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.

@Ross Summerell

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.

@Vitaly Friedman

[…]

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

[codinghorror (Jeff Atwood)]

Can you repro this @j.jaffeux ?

[j.jaffeux (Joffrey Jaffeux)]

Changes I have made in the last months should have fixed this. Let me know if it doesn’t.