vue mt-datetime-picker 只展示年份

一. 可以用js的方法去掉
这个也是在网上找了下看到可以利用dom获取元素,再隐藏起来.

//调起时间弹出弹窗时候用
var pickerSlot = document.getElementsByClassName('picker-slot');
pickerSlot[1].style.display = 'none'
pickerSlot[2].style.display = 'none'

然后我这边有个需求 在一个页面 可能要多次调用这个时间插件,需要循环遍历,并且可以新增删除,然后就发现了这个只能第一个能只展示年份,后面还是正常出现年月日.

然后就开始高中学数学的模式,找规律,发现还是有规律,第一个1.2 | 第二个 4.5 | 第三个 7. 8 | 第四个 | 10.11, 就这样隔一个数下去, 规律就出来,然后加上其他小逻辑我就写成这样了

var pickerSlot = document.getElementsByClassName('picker-slot');
if(this.type == 1) {
  pickerSlot[(this.index) * 3 + 1].style.display = 'none'
  pickerSlot[(this.index) * 3 + 2].style.display = 'none'
} else {
  pickerSlot[((this.length || 0) + this.index + (this.index1 || 0)) * 3 + 1].style.display = 'none'
  pickerSlot[((this.length || 0) + this.index +  (this.index1 || 0)) * 3 + 2].style.display = 'none'
}

然后就这样大功告成了,自己新增几个,删除几个貌似没问题了

然后测试新增到二十多个时候,问题就出现了, 二十个后面的又变成了年月日了, 真是日的.

自己点点点,也想不通为啥,当我f12,看样式时候,我就傻了,为啥不能css去掉呢,然后就有第二个方法

二.用css方式去掉

.yearPicker {
  .picker-items {
    .picker-slot:nth-child(2), .picker-slot:nth-child(3) {
      display: none;
    }
  }
}

就这样结束 哈哈哈… 方法是多种,百度是好事,但是要变通,唉…