标签：DatePicker picker nth tr ant 组件 th antDesign 0px

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。