其他分享
首页 > 其他分享> > 记修改ElementUI的时间控件DateTimePicker样式踩坑日记

记修改ElementUI的时间控件DateTimePicker样式踩坑日记

作者：互联网

前言

需求是这样的，时间只能选择之后的时间，并且日期时间只要求精确到小时，也就是不用选分钟和小时。根据ElementUI的代码复制粘贴过来。

  <el-date-picker
   v-model="value2"
    type="datetime"
    placeholder="选择日期时间"
    align="right"
    format="yyyy-MM-dd HH"
    value-format="yyyy-MM-dd HH">
  </el-date-picker>

这样设置后并没有禁止之前的时间不可以选择，可以随便选择之前的时间，不符合开发需求。
在这里插入图片描述

解决日期+时间禁止点击

根据ElementUI开发文档进行相关的配置后，
禁止时间点击给组件加上:picker-options="pickerOptions"，
代码如下。单独写成一个onshelvesTimeForm 组件

<template>
  <el-form-item :label="label" style="width:100%" :prop="prop" class="selectTime">
    <el-date-picker
        style="width:356px"
        clearable
        :disabled="disabled"
        v-model="onshelvesTime"
        type="datetime"
        format="yyyy-MM-dd HH"
        value-format="yyyy-MM-dd HH"
        :picker-options="pickerOptions"
        :placeholder="placeholder"
        popper-class="noneMinute"
        @change="val => this.$emit('selectTime',val)">
    </el-date-picker>
  </el-form-item>
</template>

<script>
export default {
    props:['label','prop','disabled','placeholder'],
    data(){
      let hour = (new Date()).getHours() + 1
      hour = String(hour).padStart(2,0)
      return{
        onshelvesTime:'',
        pickerOptions:{
          disabledDate:(time)=> {
          // 为23:00点 只可选第二天
          if(hour == 24) {
              return time.getTime() < Date.now()
          }
          return time.getTime() < (Date.now() - 86400000)
          } ,
          selectableRange: `${hour}:00:00 - 23:00:00`
        },
      }
    },
    watch:{
      onshelvesTime(val,oldVal) {
        let selectDate = val ? val.substr(0,10) : ''
        let selectHour = val ? val.substr(11,2) : ''
        if(selectDate == this.currentDate) {
          let hour = (new Date()).getHours() + 1
          hour = String(hour).padStart(2,0)
          if(parseInt(selectHour) <= parseInt(hour)) {
            this.onshelvesTime = `${selectDate} ${hour}`
          }
          this.pickerOptions.selectableRange = `${hour}:00:00 - 23:00:00`
        } else {
          this.pickerOptions.selectableRange = '00:00:00 - 23:00:00'
        }
     }
   },
   computed:{
     currentDate() {
      let time = new Date()
      let year = time.getFullYear()
      let month = String(time.getMonth() + 1).padStart(2,0)
      let day = String(time.getDate()).padStart(2,0)
      return `${year}-${month}-${day}`
    }
   },
  


}
</script>

<style lang='stylus'>
.noneMinute 
 .el-time-spinner__wrapper
   width 100% !important
 .el-scrollbar:nth-of-type(2)
   display none
 
</style>

使用

 <onshelvesTimeForm 
   :label="'上架时间'"
   :prop="'onshelvesTime'"
   :disabled="dialog.id && dialog.status !== 1"
   :placeholder="'请选择上架时间'"
   @selectTime="val => this.formObj.onshelvesTime = val"
  />

解决只显示时间

  1. 第一种全局样式，这样做有个缺点，以后使用时间控件都只会显示小时。（不推荐）
<style lang='stylus'>
 .el-time-spinner__wrapper
   width 100% !important
 .el-scrollbar:nth-of-type(2)
   display none
 
</style>
  1. 加上scoped？Vue的scc作用域scoped这是行不通。因为时间选择器el-date-picker是将元素直接挂载到页面的<body>的。那样式穿透呐？>>>或者/deep因为元素直接添加的body中，没有前置类。行不通。
  2. 看文档，有个属性popper-class DateTimePicker 下拉框的类名；根据这个属性添加类popper-class="noneMinute"。这样就只会在noneMinute这个类下的样式有效，不会影响其他的时间选择器。
    然后编写类noneMinute
<style lang='stylus'>
.noneMinute 
 .el-time-spinner__wrapper
   width 100% !important
 .el-scrollbar:nth-of-type(2)
   display none
 
</style>

在这里插入图片描述

完整代码在上面的。

标签：控件,00,val,hour,ElementUI,let,time,el,DateTimePicker
来源： https://blog.csdn.net/qq_42335214/article/details/112705193