昨天跟大家分享了在antd官网如何使用DatePicker组件并且选择效果为周的方法,今天再跟大家分享一下如何去除DatePicker选择周的时候去掉最左边的周的那一列。
效果图如下:
对比原来的图:
今天一上班,leader就让我把左边标红的列去掉,遇到这个需求后,我就去官网看了有没有能够直接符合我的需求的属性,结果就是没有找到。我想到的办法就是先f12查看这个日期结构长啥样。
原来是一个表格,上面的周日到周六是thead,下面的日期是tbody
也就是这个日期是一行一行组成的,如果我们不想要最左边那一列,就要让每一个tr的第一个td的宽度为0,这样这一列就在视觉上呈现了消失的效果,但是DOM节点还是存在的,所以现在要去找表头的第一个th的类名是什么?如下图所示
这个th没有类名,只有一个aria-label,这个东西我也不知道是什么意思,有什么用,这是mdn对它的讲解使用 aria-label 属性 - 无障碍 | MDN ,但是不知道它是干什么的我们也可以通过样式来解决问题,代码如下
.ant-picker-content {
thead {
tr > th:nth-of-type(1) {
width: 0px !important;
}
}
}
找到类ant-picker-content下的thead的tr的第一个th,给他宽度设置为0px。效果如下
现在找到tbody里面的每一行的第一td类名,并且设置其字体大小为0,
.ant-picker-cell-week,
.ant-picker-week-panel-row-selected td:nth-of-type(1) {
font-size: 0px;
}
最后的css代码如下
.ant-picker-cell-week,
.ant-picker-week-panel-row-selected td:nth-of-type(1) {
font-size: 0px;
}
.ant-picker-content {
thead {
tr > th:nth-of-type(1) {
width: 0px !important;
}
}
}