背景:
因为页面篇幅原因,需要让日期范围选择器只展示一个框,用的antd 4.x
官方并没有提供单个框的处理方式, 下面文章提供的思路:
antd RangePicker只显示一个日期选择框_proformdaterangepicker 只设置一个-CSDN博客
利用时间范围选择器,可以让组件只展示一个框,但需要把时间那部分用样式隐藏掉,并且多了个“确定”的按钮操作,有点不合意。
翻看了一下官方组件,既然可以用样式来隐藏,那是不是可以隐藏掉第二个框,全程只在第一个框操作呢?
动作:
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;
}
}
}
搞定!