修改element-ui中时间选择器的样式

最后实现的效果：

使用的是element-ui中默认的日期时间范围选择器，下面代码是从element官网复制来的

<span class="demonstration">默认</span>
<el-date-picker
  v-model="value1"
  type="datetimerange"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期">
</el-date-picker>

<script>
  export default {
    data() {
      return {
        value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      };
    }
  };
</script>

样式：

修改后：

<el-date-picker v-model="value1"
                class="input"
                type="datetimerange"
                :start-placeholder="startplaceholder"
                :end-placeholder="endplaceholder"
                :default-time="['12:00:00']">
</el-date-picker>

// 时间选择器
.input {
  padding-left: 10px;
  background-color: transparent;
  border: 1px solid #44a5fc;
  color: white;
  height: 30px;
  box-shadow: 0 0 15px #23c5ff inset;
  margin-right: 30px;
}

/deep/.el-date-editor .el-range-input {
  background-color: transparent;
  color: white;
}
/deep/.el-range-editor.el-input__inner {
  padding: 0;
}
//去除icon
/deep/.el-icon-time:before {
  content: "";
}
// 时间范围背景色
/deep/.el-date-table td.in-range div,
.el-date-table td.in-range div:hover,
.el-date-table.is-week-mode .el-date-table__row.current div,
.el-date-table.is-week-mode .el-date-table__row:hover div {
  background-color: #d4e854;
}

<script>
export default {
  name: 'SpaceClear',
  data () {
    return {
      value1: '',
      startplaceholder: '开始日期',
      endplaceholder: '结束日期'
    }
  }
}
</script>

样式：