时间选择器的设计

时间选择器，听到这个组建的名字大家很轻松的想到：一个下拉框，有日期可以选择。

公司现有网站上针对历史订单有时间选择器，只是每次只能选择一个时间点，接到需求现有的时间选择器无法满足业务要求，要求优化下时间选择器，在一个下拉框内选择一个时间段。接到这个需求的第一反应就是这不简单吗，赶紧打开Antdesign参考(chao)起来，一会儿就有了下图几个交互样式，果真机智如我，考虑这么严谨，窃笑ing。

在这个设计的时候考虑到的交互如下：

1、时间段选择由左右两个月份日历组成

2、每页会有当月和相邻月份的日期，因此当月日期黑色字体显示，相邻月份的日期灰色字体显示

3、可以通过点击年份和月份进行月份选择

4、如果同一页中，月份相隔一个月，每个月份都可以单独向前翻和向后翻。

5、选择时间段跨月份时，相邻月份中灰色日期不给选中状态。

6、我们这个是针对历史订单查询，所以今天以前的时间应不可选。

这些交互的思考都是基于使用antdesign的时间选择器（https://ant.design/components/date-picker-cn/），但是在使用antdesign的时间选择器的过程并没有感觉很清爽，

发现了两个问题：

1、选择年份和月份的时候，选择的过程中容易混淆

2、同一页中相邻月份日期灰色日期容易混淆

3、看了苹果系统的日历发现，每个单独月份会有6行。而我的5行就可以了，是不是漏掉了什么？

针对以上三个问题，又进行了一次优化，

1、点击年份，切换到年份选择的时候，日历的表头为当前选中的年份，点击表头或者任意一个年份回到日期页。

2、点击月份显示当年的某个选择的月份，点击表头或者任意某月份回到日期页。

3、左右两个月份日历中，非当月日期去掉不显示。

4、左右两个日历默认5行，当出现6行情况下自动向下撑。

优化后有了下图

总结：任何一个小组建在设计的过程中，都应该考虑考虑再考虑，现有的不一定适合你的需求。

ps：近期喜欢的一句话“你就是自己的伯乐，与其等待别人发现自己，倒不如自己先发现自己。”