北极星日期选择器
日期选择器让商家从可视化日历中选择日期，该日历始终适用于需要在Shopify上选择的任何日期。
当商家需要选择接近今天的某一天时使用(今天是日期选择器的默认起始位置)。OB欧宝娱乐APP
进口{DatePicker}从“@shopify /北极星”；进口{useState，useCallback}从“反应”；函数DatePickerExample（）{常量［{月，一年}，设置当前日期]＝useState（{月：1，一年：2018}）；常量［selectedDates，setSelectedDates]＝useState（{OB欧宝娱乐APP：新日期（“2018年2月7日星期三00:00:00 GMT-0500 (EST)”），结束：新日期（“2018年2月7日星期三00:00:00 GMT-0500 (EST)”），}）；常量handleMonthChange＝useCallback（（月：数量，一年：数量）= >设置当前日期（{月，一年}），［]，）；返回（<DatePicker月＝{月}一年＝{一年}onChange＝{setSelectedDates}onMonthChange＝{handleMonthChange}选择＝{selectedDates}/>）；}道具
想要帮助完善这个功能吗?请分享你的反馈．
接口
DatePickerProps
- id？ 字符串
-
元素的ID。
- 选择？ 范围|日期
-
所选日期或日期范围。
- 月 数量
-
显示月份，从0到11。0是一月，1是二月……11日是十二月。
- 一年 数量
-
今年要展示。
- allowRange？ 布尔
-
允许选择一定范围的日期。
- disableDatesBefore？ 日期
-
在此之前禁用选择日期。
- disableDatesAfter？ 日期
-
在此之后禁用选择日期。
- disableSpecificDates？ 日期[]
-
禁用特定日期。
- 数月？ 布尔
-
选择可以跨越多个月。
- weekOB欧宝娱乐APPStartsOn？ 数量
-
每周的第一天，从0到6。0是星期天，1是星期一……6点是星期六。
默认为0．
- dayAccessibilityLabelPrefix？ 字符串
-
视觉上隐藏的前缀文本选定的日子在单一选择日期选择器。
- onChange？ （日期：范围) = >无效
-
选择日期时回调。
- onMonthChange？ （月：数量，一年：数量) = >无效
-
更改月份时进行回调。
最佳实践
日期选择者应该:
- 使用智能默认值并突出显示常用选项
- 选择单个日期后关闭，除非需要一个包含开始日期和结束日期的范围OB欧宝娱乐APP
- 第一次点击或点击OB欧宝娱乐APP时设置开始日期，第二次点击或点击时设置结束日期(如果需要一个范围)
- 不能用于输入未来或过去许多年的日期
- 遵循日期格式指南
可访问性
一些用户可能会发现与日期选择器交互具有挑战性。在使用日期选择器组件时，也要始终为用户提供使用文本字段组件输入日期的选项。
类型中的日期选择器弹出窗口组件，然后使用一个按钮来触发弹出窗口，而不是在文本输入获得焦点时显示弹出窗口。这让用户可以更好地控制自己的体验。
键盘支持
- 按下选项卡关键是前进和转变+选项卡向后移动上一个按钮、下一个按钮和日历
- 当焦点在日历中，使用方向键在日期之间移动键盘焦点
- 选择有焦点的日期，按输入/返回关键