elementUI组件中el-date-picker限制时间范围精确到小时，隐藏分钟下拉框样式

2024-11-25 791 阅读1分钟

需求设定

1.实现一个时间选择器，可以选择到小时。

组件选型

<template>
  <div>
    <el-date-picker
        v-model="value"
        format="yyyy-MM-dd HH"
        value-format="yyyy-MM-dd HH"
        type="datetime"
        placeholder="选择日期时间"
        popper-class="hour-picker"
        :picker-options="pickerOptions"
    ></el-date-picker>
  </div>
</template>

出现问题

1.使用format="yyyy-MM-dd HH"，但是选择那块还有分钟的下拉框。（虽然功能能实现）

解决问题

1.刚开始在在vue文件中样式不生效，发现是区域问题（时间选择器弹窗是在body下），放到html文件的样式生效。 index.html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link href="./index.css" rel="stylesheet">
  </head>
  <body class="theme-d2">
    <div id="app">
    </div>
  </body>
</html>

index.css文件

.theme-d2 {
  // datePicker时间选择器，精确到小时（yyyy-MM-dd HH）隐藏分钟下拉框
  .hour-picker{
    .el-time-spinner__wrapper {
      width: 100% !important;
    }
  
    .el-scrollbar:nth-of-type(2) {
      display: none !important;
    }
  }
}

最终展示