网站设计

Website development

设计趋势与资源:时间和日期输入字段

发布时间：2017-01-04 09:46:09

TAGS：网站设计

从用户处理数据信息始终是一个麻烦。有没有一个好的方式去做，而信息往往太过笨重的创造一个干净的输入形式。

但是互联网已经走过了漫长的道路，有很多办法可以遵循。在这篇文章中，我想分享的处理时间/日期输入字段的提示和资源。如果你遵循这些提示，你会更容易的制作日期字段，以及用户体验，迎合了人们。

简单的下拉菜单

第一和明显的选择是每个字段的下拉菜单。这样，你可以做一个月/日/年的选择与个人选择菜单的下拉菜单。

这有其利弊。大的好处是，每个人都知道如何使用下拉字段。这是一个原生的HTML元素，这是很常见的，每个人都应该能够得到所需要的信息。

然而，这是不利的；下拉菜单可以把更多的精力来完成。如果你有选择目标的一年，它可以包括输入数百年。同一是真的国家选择菜单

但由于这一过程是众所周知的，它也是简单的选择。你真的不会走错的创建日期/时间选择菜单输入。

massage envy calendar

上面的例子是一个在线调度页按摩羡慕。你输入的所有数据，然后选择从预定的一场约会。

这是比大多数的形式有点不同，因为它需要在后端的额外工作。每一次加载窗体需要检查数据库看哪天是免费的，哪次没有被其他的约会要求。

如果你有一个动态的web应用程序一样，它会花更多一点的工作，但你仍然可以看到下拉选择菜单效果极佳。

格式化输入字段

另一种风格，复杂一点的是格式化的固定输入字段。而不是一个选择的元素，你可以使用一个文本输入表示每个数据块像一个月，一天，一年，甚至时间（小时/分钟）。

但这种技术可以更好的JavaScript，所以你能够结构输入。例如，你可以写一些JS代码限制月份和日期输入字段只有两位数。你可以限制某些价值没有意义的，像数字99的月。

退房这段代码看到一个简单而有效的例子。

tab date input fields

你会发现随着日期的输入，还有一个信用卡号码的房间和一个IP地址。这种技术可以很好地用于任何有限值的输入在一个特定的语法，工作。

例如，年/月/日将遵循语法的4 / 2 / 2位数。作为用户类型今年的第四位，场均能自动标签来关注月投入。这样，用户不点击“标签”移动到一个新的领域；他们可以冲数和保持运动。

如果你走这条路，你甚至可以使用数据输入这是一个新的HTML5。

datetime input field

上面的例子显示了一个日期的输入字段的小浏览器bug。它已被解决，但演示是一个很好的例子，你可以做一点原始的HTML。

用户可以手动打卡的日期数，或者他们可以使用上/下箭头循环通过他们的选择。这是迅速成为一个受欢迎的选择因为信息可以通过后台一个表单域，使开发过程更简单。

弹出日历

这是实现复杂的款式也很美观，非常人性化。您可以添加完整的日历界面的任何形式的领域使用一些基本的JavaScript和jQuery插件。

这不是在所有的浏览器完全支持但大多数互联网用户将得到的全部好处。这些日历窗口有许多不同的大小和样式，但他们的目的都是为了一个目标：简单。

查看主页Hipmunk尽量选择出发和返回日期。

hipmunk calendar input

自定义日历菜单跨越两个月，使超容易选择在不久的将来的某个日期。它也有箭，所以用户可以移动之间的月检查日期到遥远的未来。

移动用户可以与日历的麻烦，所以这是很好的提供一个移动的替代。但是，如果用户有一个更大的屏幕和支持这一功能，它绝对是清晰的解决方案。

american airlines calendar input

我会盖一些日历插件，晚一点在后，所以如果你正在寻找资源，跳到那一段。

但要记住，即使弹出日历是非常动态的，他们也是复杂的解决方案。如果你走这条路，一定要为那些不能与弹出菜单的用户选择工作。

手机UI支持

一般的手机，支持的是一个好主意日期选择器。这些使用原生滚动界面在Android和iOS使它们易于使用。移动应用程序使用这些元素的默认和他们很好的支持，在所有智能手机。

但如果你感觉自信，你可以自定义这些日期输入代码风格。他们很容易改变和重塑的需要，虽然大多数用户不会关心设计。他们只是想要一个日期选择器。

mobile calendar datepicker

当谈到移动日期选择器，总是与本地解决方案。不要试图重新发明轮子，因为用户已经知道这些接口的工作。

我喜欢滚动代码的接口，因为它可以在任何移动浏览器默认。它也连接到任何选择的领域你可以使用菜单选择后退移动用户。

journal mobile app calendar

只要每一个用户输入的日期/时间信息的能力，细节和用户体验进行了实验。

好的免费插件

在以前的文章中，我概述了日期选择器插件jQuery。该名单包括用于不同的目的，不同的插件，我想好的选择是更一般的网页设计项目。

datepicker js

如果我想建立一个动态数据输入字段，我喜欢的插件pickadate.js。这个免费的开放源代码项目上jQuery和提供一系列不同的界面风格。

它主要是由日期选择，但你也可以添加一个时间选择器太。这是一个很简单的插件来实现，但你永远要为那些不能从高级界面有利于用户回退。

实施datebox

jqm datebox plugin

如果你不喜欢默认的移动体验，你总是可以用jQuery移动工作DateBox插件。这是在顶部的jQuery移动，这是流行的开源移动框架。

它的动力由JavaScript和jQuery，在投入了大量的努力来支持广泛的观众可能团队。如果你正在寻找移动一个免费的插件，然后datebox则是一个很好的选择。

datepair.js

datepair js plugin

一些设计师想要一个很简单的解决办法，并datepair完全符合该法案。它可以为日期或时间的工作，和它的几个不同的弹出菜单选择。

每当用户点击关注一个输入字段，他们会得到一个日期/时间上市小的弹出菜单。他们可以手动输入信息，或单击“从弹出的选择。（一个很好的选择，简单的应用程序。）

gldatepicker

gldate picker plugin

后，我想分享gldatepicker插件这是非常复杂的，它为用户提供了在一个巨大的日历界面点击。

这个工作好在非常具体的项目里的日期信息是至关重要的。它是完全动态的但也是实施适当的更复杂的插件之一。

没有正确添加到您的网站选择错Datepicker。不同的观众喜欢不同的特点，所以你总是可以运行测试，看看有什么效果好。

无论如何，这些趋势是普遍适用于所有网页设计项目。你是否建立预约页面或一个生日场，这篇文章可以帮助你设计一个接口的使用和适当的每个项目。

原创不易，未经授权，严禁转载

原文地址：https://www.yzlink.cn/i,72,7021,0.html

上一篇：设计师最爱滚动的最佳实践

下一篇：要访问的响应式网页设计

您还有可能感兴趣的内容

建站流程

Website development

网站需
求分析
网站策
划方案
页面风
格设计
程序设
计研发
资料录
入优化
确认交
付使用
后续跟
踪服务
+86 10 64758810
18510861135

热门标签

Website development

客户评价

更多+

感谢云智互联，系统提前完成，在整个项目周期内，云智互联对待我们并不像是对待客户，更像是朋友一样，每一次，都能以专业的角度向我们提出更合理、更有效的解决方案，并快速、细致地完成我们的每一个需求，再次感谢以至诚之心做事的云智互联团队。

潘涛
我是东方龙马集团，在云智家做了2个企业官网，服务态度超级好。如果想做网站，选择他家一定不后悔。性价比高，服务态度好。值得你的信赖！

谭娇
技术好，设计精良，操作便利，很专业！配套的服务和后续的服务都很好,网站封面堪称精品，运行方便，后台操作的简单。技术还会耐心教我,很好的云智互联（北京）科技有限公司，建站很不错的。

陈曦
不错，价格比较合适，重点是响应速度蛮快，有什么问题都会马上给你解决，公司很满意，因为他们都是针对每个项目建了相应的讨论组，有问题可以再里面提出，人员分工到位，解决问题很及时。

张经理