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

昨天跟大家分享了在antd官网如何使用DatePicker组件并且选择效果为周的方法,今天再跟大家分享一下如何去除DatePicker选择周的时候去掉最左边的周的那一列。

效果图如下:

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

对比原来的图:

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

今天一上班,leader就让我把左边标红的列去掉,遇到这个需求后,我就去官网看了有没有能够直接符合我的需求的属性,结果就是没有找到。我想到的办法就是先f12查看这个日期结构长啥样。

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

原来是一个表格,上面的周日到周六是thead,下面的日期是tbody 

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

 也就是这个日期是一行一行组成的,如果我们不想要最左边那一列,就要让每一个tr的第一个td的宽度为0,这样这一列就在视觉上呈现了消失的效果,但是DOM节点还是存在的,所以现在要去找表头的第一个th的类名是什么?如下图所示

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

这个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。效果如下

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

现在找到tbody里面的每一行的第一td类名,并且设置其字体大小为0,

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

.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;
      }
    }
  }

上一篇:深入浅出数据结构C语言版(8)——后缀表达式、栈与四则运算计算器


下一篇:day12、面向对象进阶(包、权限修饰符、final、常量、枚举、抽象类、接口)