从用户那里获取日期/时间输入的最佳方法是什么？
这是一个多年来被一次又一次重新发明的轮子。
问题：用户需要输入日期/时间
基本注意事项
- 我们希望让用户尽可能轻松地输入所需的日期/时间
- 有些应用程序调用历史日期，有些应用程序调用仅对于未来的日期，有些人需要同时处理这两种情况。
- 我们希望防止用户输入胡言乱语的数据，
- 我们希望尽可能积极地自动填充此控件。
- 我们希望该控件尽可能可重用。
流行的解决方案包括：
- 文本框
- 组合框
- 弹出日历
- 服务器端和/或客户端验证
- 提醒用户有关不良数据的各种方式
有各种各样的即食解决方案，但我正在寻找一些更一般的信息。 是否对各种日期时间控制方法进行过可用性研究？ 是否有“最佳”日期时间控制？ 是否有任何既定的“注意事项”？
相关问题：描述时间范围的最佳 GUI 控件
This is a wheel that's been re-invented again and again over the years.
The Problem: The user needs to input a Date/Time
Basic considerations
- We want to make it as easy as possible for the user to enter the desired date/time
- Some applications call for historical dates, some applications call for future dates only, some will need to handle both
- We want to prevent the user from entering jibberish data
- We want to auto-populate this control as aggressively as possible.
- We want this control to be as re-usable as possible.
Popular solutions include:
- Text Boxes
- Combo Boxes
- Pop-out calendars
- Server-side and/or client-side validation
- Various ways of alerting the users about bad data
There are a panoply of ready-to-eat solutions about, but I'm looking for some more general information. Have there been any usability studies done on the various date-time-control approaches? Is there a "best" date-time control out there? Are there any well-established "Dos and Don'ts"?
Related question: Best GUI control(s) to describe a time range
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（12）
我的偏好是旁边带有省略号按钮的文本输入：
省略号会弹出一个日历来填充文本输入，但用户可以根据需要输入日期。 验证应该在按下表单的“确定”按钮时完成 - 根据我的经验，尝试逐个字符地进行日期验证是注定要失败的。
验证应该很复杂，并允许
诸如此类
的表达式。编辑：在回复某些评论时，可以在文本编辑失去焦点时进行验证（尽管我讨厌这种事情），在这种情况下编辑内容可以从“23 Jan”更改为“23-01-2009”，以表明该表达式已被理解。
My preference is for a text input with an elipsis button next to it:
The elipsis would pop up a calendar to populate the text input, but the user can type in a date if they want. Validation should be done when the "OK" button for the form is pressed - trying to do date validation on a character by character basis is doomed, in my experience.
The validation should be sophisticated and allow expressions like
etc.
Edit: In reply to some comments, one could do validation when the text edit loses focus (though I hate that kind of thing) in which case the edit content could change from "23 Jan" to "23-01-2009" to indicate that the exprssion was understood.
给我一个日历，让我用鼠标选择日期。 让我用键盘输入日期。 接受尽可能多的格式。 如果我需要输入 2012 年 12 月 21 日，请使用：
无论您决定做什么来解决本地化问题，请确保您的期望是显而易见的。 给我一个例子，或者一个我可以输入的带有
MMDDYYYY的模板。请不要给我需要滚动的下拉框，尤其是多年来。 如果我老了，并且正在输入我的出生日期，那么我一生中就没有足够的时间向下滚动到下拉框的底部。 当我不知道选项是什么时，下拉框是一个很好的模式，但如果是我非常熟悉的内容，比如我的生日，那么下拉菜单就很麻烦了。
现在，WRT 时间输入（大麻烦），不要以为我的意思是凌晨 3 点。 如果我输入 3 时间，则假设我的意思是下午 3 点。 让我做额外的工作来安排凌晨 3 点的事情。 如果你不愿意代表我承担这么多，至少提醒我，我已经安排了凌晨 3 点的事情，这样我就可以立即修复它，而不是稍后当我的活动邀请列表中的某人发电子邮件说“你这个白痴，你我们的 D&D 聚会安排在凌晨 3 点！”
Give me a calendar to select the date with a mouse. And let me type the date in with the keyboard. Accept as many formats as possible. If I need to enter December 21, 2012, let me use:
Whatever you decide to do to solve the localization issue, make sure it's obvious what you expect. Give me an example, or a template with
MMDDYYYYthat I can type over.Please don't give me pull-down boxes where I have to scroll, especially through years. If I'm old, and I'm entering my DOB, I don't have enough time left in my life to scroll down to the bottom of your pull-down box. Pull-down boxes are a good pattern to use when I don't know what the options are, but if it's something I'm very familiar with, like my birth date, then pull-down menus are a hassle.
Now, WRT time inputs (Big pet peeve), don't assume that I meant 3 am. If I enter 3 for the time, assume I meant 3 pm. Make me do extra work to schedule something at 3 am. If you're uncomfortable with assuming that much on my behalf, at least alert me that I've scheduled something for 3 am so I can fix it now instead of later when someone on my event invitation list emails and says "You moron, you scheduled our D&D Meetup for 3 am!"
我认为 Google 日历上的日期范围输入非常好。 您可以通过键盘或鼠标输入。 唯一的问题是输入不同年份的日期。
您可以通过键盘轻松完成此操作，但日历上应该有第二组小箭头，可以使用鼠标一次来回跳转一年。
编辑：针对以下问题：“如果您想安排一个从周二晚上 11 点到周三凌晨 1 点的活动（例如每日构建），该怎么办？如何将时间安排到午夜？< /em>”
如果“结束”时间超过午夜，则将“结束”日期滚动到第二天。 这只是组件业务逻辑的一部分。 您会注意到在上面的第二张图片中，下拉菜单指示了事件的结束时间和持续时间，这应该是一个提示。
如果您尝试将结束日期设置为早于开始日期，则可以突出显示字段的背景颜色和/或在保存时显示错误消息。
尝试一下 Google 日历，看看它的表现如何。
I think the date range entry on Google Calendar is quite good. You can enter by keyboard or by mouse. The only quibble would be in entering dates for a different year.
You can do it easily enough via the keyboard, but they should have a second set of little arrows on the calendar to jump a year at a time back or forth using the mouse.
EDIT: In response to the question, "What if you want to schedule an event that goes from 11PM on Tuesday till 1AM on Wednesday (say a daily build, for instance)? How do you wrap the time over midnight?"
If the "to" time pushes it over midnight, then roll the "to" date to the next day. That would just be part of the business logic of the component. You'll notice in the second image above, the drop-down indicates both the end time and the duration of the event, which should be a hint.
If you try and put an end date earlier than the start date, you can highlight the background colour of the fields and/or show an error message on save.
Play around on Google Calendar and see how it behaves.
我建议您还允许喜欢打字而不是单击日历控件的用户，因此文本框+弹出日历的组合效果很好。
我们用这样的组合创建了一个自定义控件。 用户可以在文本框中输入各种格式的日期，或者单击按钮弹出日历。
我们允许各种输入，如“今天”、“星期三”或“+2”（后天），并对大多数验证客户端使用正则表达式。 当然，我们也进行服务器端验证。
该控件还有一个可选的时间文本框，可以通过属性启用或隐藏。 我们觉得将日期与时间分开更容易。 对于时间，我们允许“9pm”、“2100”、“09:00”等。
该控件满足最小和最大日期，因此出生日期的范围可以是从-100年到当年，而信用卡的有效期可能从当年到+5年不等，因此我们使用范围验证器。
I'd suggest you also allow for users who like to type rather than click on a calendar control, so a combination of text box + popup calendar works well.
We created a custom control with just such a combination. User can type a date in a variety of formats in the textbox, or click on a button to pop up the calendar.
We allow all sorts of input like "today", "wed", or "+2" (for day after tomorrow) and use regular expressions for most of the validation client side. We also do server side validation of course.
The control also has an optional textbox for time which can be enabled or hidden by a property. We felt it was easier to separate date from time. For times, we allow "9pm", "2100", "09:00" etc.
The control caters for a min and max date, so that date of birth can have a range from say -100 years to current year, while credit card expiry might range from current year to +5 years, and so we use range validators.
我选择了一个文本框，旁边有一个弹出日历的图像链接。 两全其美。
如果你想要额外的东西，你可以让自然语言日期/时间解析器像 Chronic http://chronic.rubyforge.org/ 给它调味。
也不要忘记国际用户。
A text box with an image-link to a pop-out calendar on the side is my choice. Best of both worlds.
If you want something extra you could let a natural language date/time parser like Chronic http://chronic.rubyforge.org/ spice it up.
Also don't forget the international users.
如果您要使用组合框/列表框选项，请确保将月份读为“Jan”、“Feb”...“Dec”，而不是“1”、“2”...“12” .
必须根据值的范围找出哪个槽位是月份、哪个槽位是相当烦人的。
If you're going for the combo-box/list-box option make sure you make the months read "Jan","Feb"..."Dec" rather than "1","2"..."12".
It's rather annoying having to figure out which slot is the month and which is the day according to the ranges of the values.
根据情况，我会选择三种选择：
我相信还有更多的选择可供选择。
I'd go for three alternatives depending on the situation:
And I believe there are more options from which I'd choose.
您需要检查您的 UI 要求。 如果您只需要启用脚本的支持，您可以使用任何全部脚本并以它们提供到隐藏字段的任何日期/时间格式运行。
但是，如果您需要在文本框中输入用户条目，那么您将面临一些决定：
验证方法取决于您对需求的决定。
我喜欢 jQuery 日期选择器 插件。 它将允许以特定格式输出。
You need to check your UI requirements. If you want script-enabled support only, they you can go with any of your panopoly of scripts and run with whatever date/time format they provide into a hidden field.
However, if you need the user entry in a textbox, then you're faced with some decisions:
Validation methods depend on your decisions on requirements.
I like the jQuery date-picker plugin. It'll allow output in specific formats.
连续显示多个月份的日历： http://www.cs .helsinki.fi/u/salaakso/patterns/Calendar-Strip.html
A calendar showing multiple months continuously: http://www.cs.helsinki.fi/u/salaakso/patterns/Calendar-Strip.html
我一直发现 Google 日历在这方面很容易使用。 你当然可以做得比尝试模仿它更糟糕。 关键是为用户输入信息的方式提供很大的灵活性。 例如，我可以从下拉列表中选择时间或手动输入时间，并且在输入时，不需要在“pm”中包含冒号或“m”。
I've always found Google Calendar easy to use in this respect. You could certainly do worse than trying to emulate it. The key is to give the user a lot of flexibility in how they enter information. For example, I can select a time from a drop down list or type it in manually, and when I type, I'm not required to include the colon or the "m" in "pm".
我真的很喜欢 QT4 的日期/时间小部件的工作方式。
这是一个简短的视频（~7.5MB），展示了该小部件的工作原理及其一些功能：视频在这里
我希望任何复杂的应用程序都具有部分或全部这些功能。
能够输入相对日期（今天、上周、三天前）很方便，但我不确定它的实用性如何，考虑到诸如“您的出生日期是哪一天？”或“您什么时候出生”之类的标准问题就像 X 通过电子邮件发送给你的那样？”。
I really like the way QT4's Date/Time widget works.
Here is a short video (~7.5MB) that shows how the widget works and what some of its features are: Video Here
I would expect any sophisticated application to have some or all of these features.
Being able to enter relative dates (today, last week, 3 days ago) is handy, but I'm not sure how practical it would be, given standard questions like "What is your date of birth?", or "When would you like X emailed to you?".
您可以使用插件 cxcalendar。 它看起来像其他日期选择器。 但您可以在单击年月标题后在选择中选择年份和月份。
you can use plugin cxcalendar. It looks like other datepicker. but you can pick year and month in select after clicking year-month title.