管理员 » 仪表盘 » 报告：日期时间选择器的用户界面改进

[amotl (Andreas Motl)]

尊敬的 Discourse 团队，

首先，一如既往，我们对 Discourse 软件的质量以及你们倾注其中的精神与热爱深感钦佩。我们无法想象在没有它的情况下运营我们的社区网站 https://community.hiveeyes.org/ 和 https://community.panodata.org/。非常感谢你们的辛勤付出。

这只是一份关于一个微小问题的简要报告，我们已观察该问题一段时间，目前在我们当前的 2.7.0.beta1 版本中依然存在。我们知道你们可能正忙于处理 Discourse 维护中更为棘手的任务，因此这份报告仅作为记录留存。

当进入 Discourse 管理后台的“报告”页面，并尝试使用键盘选择日期时间范围（例如，尝试修改年份，如 2019）时……

……我们经常会遇到页面崩溃的情况。这是因为应用输入的操作响应过快，尚未等待操作完成便已触发。更常见的是，由于所选日期时间范围返回的数据量过大，无法及时处理，从而导致此类响应。

或许可以通过为用户输入添加一定的空闲超时或延迟来改善这一问题？

此致
Andreas

[amotl (Andreas Motl)]

我刚刚试图弄清楚是否其他人也遇到了类似的困扰，并找到合适的术语。确实，我已经找到了一些参考资料，因此在此直接引用以供参考。

@Ross Summerell

我遇到的问题是我希望既能使用可输入的字段，又能使用日期选择器，但当我在这个输入框中输入时，会触发 keyup 事件，进而触发其 v-on:selected 事件。

这意味着，如果我开始输入 ‘2012-02-02’，它会在每次按键抬起时提交。

通常这很容易解决，因为你可以使用 .length，但这个 Vue 组件总是返回一个已解析的 Date 对象，所以这种方法行不通。

我原本打算拆解该组件并自己构建一个，但希望有人能提供一个不同的解决方案。

– https://stackoverflow.com/questions/56890586/vuejs-datepicker-typeable-input-submit-delay

在快速浏览了 Vitaly Friedman 的这篇精彩文章后，我充分认识到，在这些方面提升用户体验可能比预期更困难。

@Vitaly Friedman

[…]

数字输入必须足够可靠，以应对各种边界情况——而这类情况非常多。当然，我们会使用某种标签或占位符来指示日、月、年输入的顺序，并提供输入格式的示例，但内联验证应能迅速识别格式错误的输入，并提供修正建议，引导用户继续完成输入流程。

[…]

那么，当用户遇到这种数字输入时，他们会如何输入数据呢？如果你观察用户输入日期的过程，你会发现他们会停顿一秒，输入 1，然后手动切换到月份输入框，输入 3，再手动切换到年份输入框，输入年份——可能是 19 或 2019。

有些用户会采取更稳妥的方式，明确输入 03 和 01。还有些用户会尝试在这些输入框中包含分隔符。由于在某些实现中，一旦激活输入框占位符就会消失，一些用户会使用与你预期不同的分隔符——通常是连字符（-）或斜杠（/）。有些用户会尝试使用输入框中的上下箭头来递增数值。还有些用户会在输入日期时选择通过 Tab 键在各个字段间切换。哦，这对内联验证来说简直是一场噩梦！

[…]

– Designing The Perfect Date And Time Picker — Smashing Magazine

[codinghorror (Jeff Atwood)]

@j.jaffeux，你能复现这个问题吗？

[j.jaffeux (Joffrey Jaffeux)]

我在过去几个月所做的更改应该已经解决了这个问题。如果仍有问题，请告诉我。