Antd 日期范围选择器控制只展示一个框

背景：

因为页面篇幅原因，需要让日期范围选择器只展示一个框，用的antd 4.x

官方并没有提供单个框的处理方式， 下面文章提供的思路：

antd RangePicker只显示一个日期选择框_proformdaterangepicker 只设置一个-优快云博客

利用时间范围选择器，可以让组件只展示一个框，但需要把时间那部分用样式隐藏掉，并且多了个“确定”的按钮操作，有点不合意。

翻看了一下官方组件，既然可以用样式来隐藏，那是不是可以隐藏掉第二个框，全程只在第一个框操作呢？

动作：

1. 先屏蔽第二个框：类名 `.ant-picker-panel-has-range:nth-child(2)` 来个`display:none;`

2. 第二框的“下个月”“下一年”的按钮怎么平移到第一个框去呢？

麻烦，第二个框才刚隐藏掉了，等等，是不是第一个框有没有可能其实也有那两个按钮呢？

一看，好家伙，原来被内联样式 visibility: hidden 给藏起来了。那用!important放开呗（谨慎操作）

3. 看起来好像完事了，也能选，但是在点击下一个月时，又变成两个框了，怎么肥事？

原来1里用的类名貌似不大合适，索性换成：`.ant-picker-panel:nth-child(2)`

总结：

先给组件加一个popupClassName

 <DateRanger popupClassName={styles.rangePop} />

写css module样式

.rangePop{
    :global{
        // 隐藏第二个框
        .ant-picker-panel:nth-child(2){
            display: none;
        }
        // 放开第一个框的右边按钮操作
        .ant-picker-header-next-btn,.ant-picker-header-super-next-btn{
            visibility: visible !important;
        }
    }
}

搞定！