有什么能设计一个如此困难体面的日期选择器？基本上，我们只需要输入字段，并且表示日历不够清楚的图标，并且一旦用户点击该图标，我们就弹出与排一字排开的日子里一点点覆盖。对？
好吧，不是每一个日期选择器适合所有接口，就像不是每个接口实际上需要一个日期选择器。但是，日期选择器时是必需的，往往它只是有点太繁琐和恼人指定一个日期，也往往会产生不相关的结果，甚至是零结果页面，虽然只是一些小的改进将使它更容易使用。
在过去的几年里，我花了很多时间与多家公司尝试了各种方法和可用性测试研究它们的工作。本系列文章是观察和实验的总结在这段时间做。经过数月的过程中，我们将探讨一切从转盘到汽车配置器。已经调查了手风琴的设计两个星期前，让我们来看看今天将日期和时间选择器的设计-在所有的各个方面和他们的外观和交互设计的味道。
首先第一件事情，虽然：日期选取器通常被认为是万无一失组件的日期选择-可预测的，一致的，通用的-所以往往不是，我们使用它们只是因为他们似乎是日期输入一个普遍接受的模式。但就像任何其他形式的元素，有时他们应该是不得已而为之的方法，帮助用户的输入，如果它不能以更好的方式来推断。现在，有哪里日期选择器是非常有帮助的情况下，并且在有些情况下，他们只是慢下来的用户。我们的工作的话，是要仔细研究我们自己的方案，并找出该帧的时间和日期的问题，帮助用户快速，方便地提供输入的最佳方式。
最好的输入是匹配用户的意图，而无需要求用户精确，当然之一。但是，如果我们设定一个预算上的日期输入至多两个水龙头？三个水龙头的日期范围？5个抽头，如果我们把一个时间段到游戏中呢？你可能会想，如果这真是一个大问题; 毕竟，这只是一个小小的日期选择器！如果日期选择是前面和中心在你的界面，你应该想到用户使用了很多，并走向极端，以优化输入的日期是不是真正的优化问题，相反却是你的网站的体验的核心要素。
事实上，有大量的上下文中，日期选择器重要：无论是用于医疗约会，水疗，船租赁，电视指南，网上银行，没有直达航班，或夏季别墅出租 – 几乎任何要求日期输入有可能有一些不大不小的日期和时间选择的。而更多的，往往不是所有的这些网站往往使用相同的（jquery的）实现，插入ui而回，从此幸福地遗忘。但是，它可能不适合你的特殊情况下的最佳选择。
日期选择器的设计考虑如果我们在日期选择器的性质仔细一看，有一个很好的许多设计问题有待解决 – 其中许多人是不能直接在所有：
难道我们设计一个日期选择器，日期范围选择器或一个时间选择器？如果用户能够键入一个日期在输入字段或仅使用日期选择器选择预定义值？如果日期选择器覆盖，当用户点击输入出现或者当他们点击日历图标（或两者）？如果该日期选择器包含默认值预填充？如果是，什么样的价值观应该是默认？我们应该包括某种“以前，现在，未来”的导航？如果是这样，我们如何设计好几天，几个月甚至几年？我们应加强通过显示体验可用性，价格等？有关窄屏幕日期范围选择器，应一次两个日期被选择的重叠自动消失，或只在“继续”按钮，用户点击继续吗？如若运行一周从周一到周日或从周日到周六？我们如何避免显示不可用日期或零结果死角？是日期选择器首先使用日期选择正确的模式？事实上，我们有很多的决策考虑，且大多不是那么简单的。但是，让我们来解决一个问题，在同一时间。我们应该问自己的第一个主要问题是什么问题，并在上下文中我们到底要解决哪有日期选择器的帮助有或者更具体地说，将有助于什么样的日期选择器的用户无缝地完成他们的任务向前推进。
我们需要什么样的投入？选择一个接口模式适用于您的问题之前，有必要了解什么样日期输入的实际需要是非常重要的。是否足以知道仅仅一天，或者你需要一个日期范围？后者并不意味着你必须使用两个日期拾荒者，虽然，但它会影响相互作用和组件的设计。
您可能还希望与延长日期选择器时输入，但并不意味着经历了逐步发生-日期选择器第一，时间选择第二个。也有办法在一个单一组分两个日期和时间选择集成。我们将在本文稍后探讨其中的一些。
您可能不需要毕竟日期选择器。天之间的垂直导航可能就足够了为好。在电视指南hd-plus。（大预览）除此之外，它是寻找到预期值的范围，您的访问者将最有可能类型，也许你就需要使用一组预定义的选项延长日期输入，或限制可接受值的范围，或者是个好主意与数字输入补充它使客户能够在手动键入值。事实上，后一种选择可能是有用的，往往不是 – 问题是，这是相当难以得到的权利。
数字输入对于日期范围较长链接有一两件事是肯定的：如果你一直在考虑一个日期选择器，机会是很高，你知道，你需要某种输入的日期的（废话！）。你可以，当然，使用三个独立的数字输入，通过分隔符号分隔-也许<select>有一天，月和年下拉-但与设计，用户将通过窃听和滚动，这不一定成行最无缝的或快速的体验。我们希望可以尽快选择的日期，并且能够设定日期有两个分（点击可打开日历，并点击挑一天）会比对付三个独立的输入字段要容易得多。
ruter，一个美丽的挪威之旅，规划师，一个select用于日期选择下拉列表。它会提示一个长期滚动区域，可能不会是输入的最快方式。（查看大版）那好吧。如果不是三个独立的输入，我们只保留一个-或许与格式帮手dd/mm/yyyy，例如？当用户开始打字，日，月和年之间的过渡应该发生无缝和自动，这样用户就不需要做任何事情，但继续输入数字键盘上。理想情况下，他们会与之后的输入完成，最多八个按键。显然，我们不能假设用户是否知道确切的日期，但它会做出精准的输入可能的，互补的到正规的日期选择器有用。尤其是在数据输入可以有很大的差异（如使用护照到期日期）接口，输入值，而不是无休止通过窃听年和月只是听起来比较合理的，对不对？
那么，数字输入必须足够可靠来管理各种极端情况-有很多他们。当然，我们会使用某种标签或占位符的指示日，月，年输入的顺序与输入格式的例子，但在线验证应该赶快拿起生病的格式输入，并建议更正向前驱动用户在输入流。当心上一周开始的一天。如果您的公司是国际，大多数客户来自美国，那么你可能需要改变基于用户的位置或偏好，以避免misbookings的ui。
作为可靠也意味着宽容。如果用户想选择2019年3月1日，随着数字输入mm/dd/yyyy，他们将需要输入01 / 03 / 19。作为设计师，这正是我们期待的输入。
现在，如何将用户在数据中该数值输入时输入？如果发现用户在输入一个日期打字，你会看到他们暂停第二，键入1，然后手动切换到一个月输入，类型3，然后手动切换到一年的输入和键入年-无论是19或2019。
其他用户将发挥它的安全和类型03和01明确。还有一些人将尝试包括在任一输入分隔符号。因为在一些实现一次输入激活占位符消失，一些用户会使用比你占了一个不同的分隔符号-通常是一个连字符（-）或斜线（/）。有些用户会尝试通过在输入字段中使用向上和向下箭头增加数值。而有些用户将通过在日期打字时的字段选择选项卡。哦，那是一场噩梦它是在线验证！
nsb.no，另一个挪威之旅，规划师，接受任何类型的输入，无论是带或不带分隔符，连字号或斜杠。这是一个很好的，宽容的ui的一个很好的例子。唯一的问题：输入“8月17日”被接受，但不understood.have用户为什么这样做？这主要是因为他们已经被烧毁，在过去 -由笨重的接口，其数据输入是设计不当，导致来回一个令人沮丧的经历-比如，看到一个错误的理解输入，然后打一个微小的日期或月份选择输入纠正它，但结束了复位其他输入结果。在所有这些情况下，很容易感到沮丧。而在所有这些情况下，设计师的实施应该能够正确地解释输入，并支持用户，而不是抛出左右（带自动完成或智能建议）错误。
保持的日期格式建议（在占位符）当用户激活的输入字段。保持显示的分隔符和占位符为用户手动输入的日期。如果由于某种原因，是不可能的，使用浮动标签继续显示格式（这确实有一定的可访问性问题，但也有一些解决方案也是如此。）
数值输入事项在输入的范围差别很大的情况下-这可能跨越多年，如签证有效日期，或占预测的输入，如生日日期。这就是它的价值投资到合适的数字输入。你甚至可以把它带到一个新的水平，支持实际的上下文敏感的输入。也许不是要求特定的输入格式，可以支持查询，如“昨天”，“现在”，“今天”，“下周五”，“一年前”，“两个星期前”，甚至是“10天进七月。”
kremlin.ru接受智能输入。或特定日期在自然语言-您可以通过键入“二月一月”指定日期范围。根据您的应用程序的性质，允许灵活的日期可能是有用的，并且在打字输入字段中的查询是很容易的。如果这是不可能的，那么它可能是一个好主意，增加对易可点击的，预定义的选项“今天”，“明天”，“7天”等旁边的日期选择器。对于机票的最佳票价搜索时，可以使用它。事实上，这也正是该技术kremlin.ru使用。当然，你还需要沟通，你支持这种“聪明”的模糊输入突出为好。
虽然数字输入是有用的，这是件好事，它可以作为一个备用，在某些情况下，日期选择器是无限更有用-例如，当客户预订短暂的假期。如果用户正在寻找未来六周内快速周末之旅，但他们没有考虑到具体的日期-相反，他们正在探索的定价和可用性，这意味着他们将几天和几周之间跳跃，并有可能甚至几个月，很多。在这种情况下，数字输入将太慢而劳累，而日历视图会更加的方式有关，因为它显示在抽头的电网一字排开周末选项。
但对于默认值？链接如果我们检查的日期选取器输入场的相互作用有点接近，我们会在一些围绕其交互设计微型决策