日期选择器

日期选择器让商家从可视化日历中选择日期，该日历始终适用于Shopify中需要选择的任何日期。

当商家需要选择接近今天的一天(今天是日期选择器的默认起始位置)时使用。OB欧宝娱乐APP

进口｛DatePicker｝从“@shopify /北极星”；进口｛useState，useCallback｝从“反应”；函数DatePickerExample（）｛常量［｛月，一年｝，设置当前日期］＝useState（｛月:1，一年:2018｝）；常量［selectedDates，setSelectedDates］＝useState（｛OB欧宝娱乐APP:新日期（“2018年2月07日星期三00:00:00 GMT-0500(东部时间)”），结束:新日期（“2018年2月07日星期三00:00:00 GMT-0500(东部时间)”），｝）；常量handleMonthChange＝useCallback（（月，一年）= >设置当前日期（｛月，一年｝），［］，）；返回（<DatePicker月＝｛月｝一年＝｛一年｝onChange＝｛setSelectedDates｝onMonthChange＝｛handleMonthChange｝选择＝｛selectedDates｝/>）；｝

道具

想让这个功能变得更好吗?请分享你的反馈．

接口 DatePickerProps

id? 字符串: 元素的ID。
选择? 范围|日期: 选定的日期或日期范围。
月数量: 要显示的月份，从0到11。0是一月，1是二月……11是12月。
一年数量: 这一年的表现。
allowRange? 布尔: 允许选择一定范围的日期。
disableDatesBefore? 日期: 在此之前禁用选择日期。
disableDatesAfter? 日期: 在此之后禁用选择日期。
disableSpecificDates? 日期［］: 禁用特定日期。
数月? 布尔: 选择可以跨越好几个月。
weekOB欧宝娱乐APPStartsOn? 数量: 每周的第一天，从0点到6点。0是星期天，1是星期一……6点是星期六。

默认为0．
dayAccessibilityLabelPrefix? 字符串: 视觉上隐藏的前缀文本选定的日子在单一选择日期选择器。
onChange? （日期:范围) = >无效: 选择date时的回调。
onMonthChange? （月:数量，一年:数量) = >无效: 更改月份时的回调。

最佳实践

日期选择器应该:

使用智能默认值并突出显示常用选择
除非需要包含开始和结束日期的范围，否则在选择单个日期后关闭OB欧宝娱乐APP
在第一次点击或点OB欧宝娱乐APP击时设置开始日期，在第二次点击或点击时设置结束日期(如果需要一个范围)
不能用来输入未来或过去许多年的日期
遵循日期格式指南

可访问性

一些用户可能会发现与日期选择器的交互具有挑战性。在使用日期选择器组件时，也要让用户可以选择使用文本字段组件输入日期。

中使用日期选择器弹出窗口组件，然后使用一个按钮来触发弹出窗口，而不是在文本输入得到焦点时显示弹出窗口。这让用户能够更好地控制自己的体验。

键盘支持

按下选项卡前进的关键和转变+选项卡通过上一个按钮、下一个按钮和日历向后移动
当焦点位于日历中时，使用方向键在日期之间移动键盘焦点
选择有焦点的日期，按输入/返回关键