Solve element DateTimePicker+vue pop-up box only displays hours

Three knowledge points:

Descendant selector

https:///css/css_selector_descendant.asp

Depth selector

/zh/guide/

ui DateTimePicker Specify the drop-down box class name popper-class

/#/zh-CN/component/datetime-picker

Under the premise of clarifying the above three knowledge points, in the global style of the vue page (that is, in the style tag without scoped tag), the css descendant selector + vue depth selector can lock the style in the element ui component to be controlled, and the style inside the element ui component to be controlled is constrained by the outer style class name, so all element ui components globally will not be contaminated.

However, DateTimePicker is quite special. The dom of the pop-up box does not belong to any tags in the current vue file, so it is impossible to lock the pop-up box part of the DateTimePicker to customize the style with the css descendant selector + vue depth selector on the current page. By consulting the official documentation of DateTimePicker, I found that you can use popper-class to specify the drop-down box class name. This way, you can use this specified class name + vue depth selector to uniquely rewrite a pop-up section of a DateTimePicker that needs to be customized in the global style.

<template>
 <div class="app-container ">
 
     <el-date-picker
      v-model="..."
      type="datetimerange"
      align="right"
      range-separator="to"
      start-placeholder="Start Time"
      end-placeholder="End Time"
      format="yyyy-MM-dd HH"
      value-format="yyyy-MM-dd HH"
      popper-class="tpc"
     ></el-date-picker>
 
  </div>
</template>
<style lang="scss" scoped>
...
</style>
 
<style>
.tpc /deep/ .el-time-spinner__wrapper {
 width:100% !important;
}
.tpc /deep/ .el-scrollbar:nth-of-type(2) {
 display: none !important;
}
</style>

This is the article about solving the element DateTimePicker+vue pop-up box that only shows the hours. For more related element DateTimePicker pop-up box content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!