日常记录之antDesign使用DatePicker组件(2)

昨天跟大家分享了在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;
      }
    }
  }

标签：DatePicker,picker,nth,tr,ant,组件,th,antDesign,0px
来源： https://blog.csdn.net/Csdn_____c/article/details/122728934