关键词：
参考技术A 选择器 是选择日期范围、时间段或两者兼而有之的绝佳工具。单击时，它们会展开为模式或对话框，并为用户提供一组可供选择的选项。选择器具有各种设计和功能。对它们挑剔确实是一件好事，因为它会帮助您找到并使用最适合您的设计目的的。
根据 Material Design 指南， 移动输入选择器 是指用户可以手动输入日期的文本输入。这是最简单的日期选择器类型，如果提供了正确的验证和输入掩码，它会很好地工作。输入掩码在用户键入时调整文本格式。
如果您的产品迎合国际用户，请确保日期格式清晰易懂。提供用户激活字段后不会消失的清晰标签或占位符。
移动输入选择器为选择过去的日期（例如，出生日期或护照到期日期）或将来的日期提供了最佳解决方案。它们可以与日历日期选择器一起使用。但是，请记住，滚动日期可能很乏味——因此即使有其他方法可用，允许用户键入也是一种好习惯。
滚动日期选择器 允许用户在移动设备上选择日期和/或时间，因为它们是为触摸交互而设计的。默认情况下，日期/时间值是打开模式视图以编辑内容的按钮。
确保用户不必滚动到过去或未来太远来选择他们输入的日期和/或时间。
日历日期选择器
日历日期选择器 是一种常用控件，用于选择与当前日期相差不超过一年的日期。单击后，会打开一个日历以提供日期列表。
当用户需要选择一个过去或未来的日期时，这种控制可能需要太多的努力。在这种情况下，输入日期选择器是一个更好的解决方案，尤其是对于移动用户。
在设计预订时，禁用不可选择的日期选项。
默认情况下，日历显示 当前日期 。你的任务是清楚地表明它，以便用户一眼就能认出它。通常，当前日期的样式应始终比选定日期的样式具有更大的视觉权重。
所选日期 应该没有今天的日期那么显眼。还建议在用户浏览日历时添加悬停状态。
当用户选择一个 日期范围 时，将其全部显示并强调第一个和最后一个日期。明亮的颜色覆盖将起到作用。确保提供范围填充以指示日期包含在范围内。日期范围选择器最常见的用例是预订航班或预订酒店。
建议并排显示两个月，以最大程度地降低交互成本并提高便利性。
当用户在选择日期时在日历选择器周围浮动时使用 悬停状态。 它指示范围将如何变化，并提供用户当前位置的线索。此外，这种视觉反馈使交互更加愉快。
悬停状态应与选定状态不同。
对于生日等 遥远 的日期，请使用忠实的旧输入选择器。这是一种有效且经过验证的方法，蛋糕上的樱桃是它不会提醒用户他们真正的年龄。此外，强迫用户滚动浏览大量页面会增加很多不必要的摩擦！
用户永远不会 100% 专注于一项任务。因此，您有责任防止他们出现意外错误，例如选择 无效日期 。例如，系统不应允许用户选择早于出发日期的返回日期。
处理这种情况的一种选择是提供有意义的验证消息来指示错误。更有效的方法是禁用无效和不合逻辑的选项。从视觉上可以明显看出特定日期不可用。最流行的技术是在用户尝试单击或点击日期时使用微妙的灰色或使日期处于非活动状态。
有多种显示日期选择的方式：用户可以手动输入，从日历中选择，或者使用 单独的下拉菜单来表示日、月和年 。最终，集成文本输入和打开日历的控件为用户提供了在日期之间导航和选择必要日期的更多自由。
但是，设计人员需要考虑更多可能发生错误的场景。日、月和年的单独下拉菜单不易出错。用户不太可能混淆日期格式并选择日期而不是月份。然而，这个日期选择器涉及更多的点击和滚动，如果用户需要选择一个遥远的过去或未来的日期，这可能会很痛苦。
有时，与其要求用户浏览日历并找到必要的日期，不如提供 内置日期选项 （例如今天、明天、昨天、2 周前等）更有意义。
必须在日历中指明选择，以便用户确信日期是正确的。需要注意的另一点是，该列表应仅包括使流程更方便的最常见日期，而不是提供会使用户感到困惑的不必要的选项。
日历日期选择器允许用户 在月份和年份之间导航， 并选择过去或未来的必要日期。显示月份和年份的最生动便捷的方法是使用整个日历显示今年所有可用的月份，然后显示其他年份。
不要吝啬空间或尝试在几个月或几年内挤入单独的下拉列表。它尤其适用于东西比桌面设备小的移动用户，并且需要更多的努力才能更好地查看信息并达到点击目标。
vueelement-ui日期选择器组件日期时间格式化
vueelement-ui组件开发大大提高了我们的效率，但有时候并不能满足我们的需求，例如时间，日期组件； element-ui日期返回的格式是这样的，看下图： 但我们要的是另一个格式，如下图： 怎么解决... 查看详情
material-ui 组件|日期选择器 |没有数据传递给 onChange
】material-ui组件|日期选择器|没有数据传递给onChange【英文标题】：material-uicomponents|datePicker|nodatapassedtoonChange【发布时间】：2016-10-0819:46:57【问题描述】：我有一个带有material-uiDatePicker的简单表单，例如：<DatePickername="startD... 查看详情
SwiftUI 多组件选择器
】SwiftUI多组件选择器【英文标题】：SwiftUIMultiComponentsPicker【发布时间】：2021-12-2819:55:26【问题描述】：我尝试构建一个多组件选择器，一开始我遇到了两个组件之间的重叠视图，这使得与UI交互变得困难，然后我找到了解决问... 查看详情
element-ui的组件改造的树形选择器（树形下拉框）
参考技术A下拉框选择数据三级嵌套展示 查看详情
在 vue 中使用 jquery ui 和时间选择器
...尝试使用jqueryui设置vuecli，但无法弄清楚如何使用jqueryui组件。我需要加载以下js文件https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.jshttps 查看详情
如何呈现材料 UI 输入控件而不是材料 UI 日期选择器的文本字段
...React(v16.3)应用程序中，我使用material-ui-pickers库的DatePicker组件呈现日期选择器控件。这个组件渲染 查看详情
带有自定义组件的 Material ui 文本字段和 Formik 表单
】带有自定义组件的Materialui文本字段和Formik表单【英文标题】：MaterialuiTextFieldandFormikformwithcustomcompnents【发布时间】：2021-10-0722:50:22【问题描述】：嘿，我正在使用FORMIK表单，我有一堆自定义组件，基本上是一个文本字段和选... 查看详情
我们是不是可以在不使用 Datepicker 的情况下将材质 UI 选择器中的 Calendar 组件用作独立组件 - 如果可以，如何？
...可以在不使用Datepicker的情况下将材质UI选择器中的Calendar组件用作独立组件-如果可以，如何？【英文标题】：CanweuseCalendercomponentinthematerialUIpickerasastandalonecomponentwithoutusingtheDatepicker-ifsoHow?我们是否可以在不使用Datepicker的情况下... 查看详情
在剑道时间选择器中选择时间时，剑道 UI Angular 过滤器菜单会自动关闭
...ndoUI网格。经过一些测试，我发现缺少timepicker过滤器菜单组件，并决定自己制作。问题 查看详情
vue动态生成表单组件vue-generate-form(代码片段)
项目地址简介Vue动态生成表单组件可以根据数据配置表单使用的UI库是iView 在Vue里一般要用到什么组件或数据都得提前声明所以要根据数据来生成表单只能使用Vue的render函数要做这一个组件其实并不难看一下Vue官方示例 ... 查看详情
如何在material-ui中使用伪选择器？
...用伪选择器在材质UIv1中显示/隐藏我的<TreeMenu/>组件，但不知何故它不起作用。这是代码：CSS：root:backgroundColor:\'white\',\'&a 查看详情
elementui日期选择器时间选择范围限制
...择的日期，这里举例子稍做补充。 单个输入框的 组件代码：<el-date-pickerv-model="value1"type="date"placeholder="选择日期":picker-o 查看详情
designsurface简介
...境交互等。 另外，宿主容器还承担许多职责。它创建组件，将它们绑定到设计器，并为其维护的组件和设计器提供服务。它从某种持久性状态加载设计器，并将它们保存回该状态。宿主容器提供撤销逻辑、剪贴板功能、以及... 查看详情
Xamarin 为 UI 测试形成更改时间选择器值
】Xamarin为UI测试形成更改时间选择器值【英文标题】：XamarinformschangingtimepickervalueforUItest【发布时间】：2017-12-1919:32:21【问题描述】：在下面的时间选择器的Xamarin表单中如何更改xamarinUI测试的时间选择器值。我可以打开时间选择... 查看详情
作业03完成一个时间选择器
1.参考ios的select组件2.要求使用前端代码完成类似功能3.先做单独的select组件，再做一个聚合组件，聚合多个select4.完成日期选择器组件（年月日）5.改变组件，完成城市选择器（省市县）--只考虑移动端！！！ 查看详情
在材料ui的日期选择器中更改formatDate
...5:02【问题描述】：我使用带有redux形式的material-uidatepicker组件。我在这里有一个小问题，看起来很神奇。当我更改日期时，它在我的输入字段中显示为yyyy-mm-dd。我想更改它以显示为dd-mm-yyyy。datepicker 查看详情
在element-ui组件select选择器的change事件中传递自定义参数(代码片段)
Select选择器在选中值发生变化时触发change事件，传递的参数是目前的选中值，例如：@change="changeValue"changeValue方法changeValue(value)/*业务处理*/但是在实际使用中触发change事件时可能不只需要传递被选中项的值，还要传递index过去，... 查看详情
element-ui日期组件datepicker设置日期选择范围pickeroptions(代码片段)
element-UI提供了DatePicker日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定,比如出行日期就不能选过去的日期,订票时间要限制日期范围官网提供... 查看详情