el-date-picker踩坑记录

修改日期下拉选项样式

最近做了一个项目，有个插件层级太高，所以不得以把日期下拉框样式改了，

1. 添加popper-class="my-date-class"属性

<el-date-picker
    v-model="dateRange"
    popper-class="date-range-class"
    placeholder="开始时间"
    type="daterange"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
/>

2. 在style中要把scoped去掉，否则样式不起作用，如果还不行，加!important，再不行，加::v-deep(scss中)或 /deep/ (sass中)

.my-date-class{
    left: 23px !important;
    width: 450px !important;
    ::v-deep .el-range-separator{
        height: 36%;
    }
    ...
}

设置默认时间

需求是需要选择开始时间的00:00:00和结束时间的23:59:59

1. 在computed中计算

computed: {
    timeDefault() {
      const dateObj = new Date()
      const curDate = dateObj.getFullYear() + '-' + ((dateObj.getMonth() + 1) >= 10 ? (dateObj.getMonth() + 1) : '0' + (dateObj.getMonth() + 1)) + '-' + (dateObj.getDate() >= 10 ? dateObj.getDate() : '0' + dateObj.getDate())
      const begDate = curDate + ' 00:00:00'
      const endDate = curDate + ' 23:59:59'
      return [begDate, endDate]
    }
  },

2. mounted赋值

mounted() {
    this.dateRange = this.timeDefault
  },

3. 添加属性default-time

<el-date-picker
   v-model="dateRange"
    popper-class="my-date-class"
    placeholder="开始时间"
    type="daterange"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :default-time="['00:00:00', '23:59:59']"
    value-format="yyyy-MM-dd HH:mm:ss"
/>

设置组件不能清空

绑定clearable属性为false

<el-date-picker
  v-model="dateRange"
  placeholder="开始时间"
  type="daterange"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
 :clearable="false"
/>

控制选择时间

1. 添加属性picker-options

<el-date-picker
  v-model="dateRange"
  placeholder="开始时间"
  type="daterange"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  :default-time="['00:00:00', '23:59:59']"
  value-format="yyyy-MM-dd HH:mm:ss"
  :clearable="false"
  :picker-options="pickerTime"
/>

2. 在Data里面加属性

data(){
    return {
        pickerTime: {
        disabledDate: time => {
          // 之前的时间返回false不能选
          return time.getTime() >= new Date().getTime()
        }
      }
    }
}