持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

新版本开始，接到一个UI需求，要调整日期组件。问题是项目中一直使用antd日期组件，并不是公司自研的。所以记录下，供大家参考。

需求同步

需求描述：样式上，把自己企业的时间组件，修改成为三个内容的拼表。左上是自定义的业务时间。例如：今天，昨天，明天组成。左下则是可以选择的时间输入框。右侧整体是个日期组件。功能上，要求一部分修改后，其他两个部分跟着联动。

需求拆解

交互上，右侧是一个日期组件。加上项目已经在使用antd组件库。这里可以选择的就有两个，DatePicker日期输入组件和Calendar日期组件。由于交互上与DatePicker组件一致，如果使用Calendar组件，就要补齐更多功能，可预见的联动很不好做，所以不选择日历组件。

经过上面分析，确定使用DatePicker组件实现右侧日期。紧接的问题是，DatePicker组件并不是单纯的日历，而是输入框+日历。所以就需要去掉输入框部分。如何只使用日历？可见下面源码分析。

DetaPicker源码分析

在gitHub仓库中，ant-design/components/date-picker/generatePicker/generateSinglePicker.tsx目录下，可以看到渲染的内容是<RCPicker>。所以，只要使用RCPicker就行了？

再进入RCPicker组件，找到日历对应的部分 PickerPanel.tsx。这里由于只要日历，所以外层的PickerTrigger就不用管了。因为它只是负责打开panel的事件中心，就是点击输入框，会弹出日历popover，这部分功能核心实现。

实现思路

具体如下伪代码所示：

    // tsx文件下
    <div style={{display: flex}}>
        <your-component></your-component>
        <rc-pickerpanel></rc-pickerpanel> //注：这里直接引用RCPicker即可。
    </div>

结束语

感谢这个需求，能让我自己静下心来，好好看看antd组件库。从中确实受益匪浅。最后，就是希望这个版本，bug退退退。

一知半解的人，多不谦虚；见多识广有本领的人，一定谦虚。 ——谢觉哉