el-date-picker日期时间选择器中,只需要选择器,不需要输入框,通过图标展示日期。

  • 3
新手上路,请多包涵

image.png
el-date-picker日期时间选择器中,只需要选择器,不需要输入框,通过红框的图标展示下面的日期。

回复
阅读 451
1 个回答
jinling
  • 235

el-date-picker内部使用input来实现的,并且没有提供相应的接口来使用其他元素作为触发器,所以只能hack。如 @cnjs 所言,可以用样式覆盖的方式来实现。代码如下:

<div id="app">
  <el-date-picker v-model="value" class="custom-date-picker" type="date" />
</div>
.custom-date-picker {
    &.el-input {
      width: 36px;
  }
    &.el-input--suffix {
    .el-input__inner {
      padding-right: 4px;
      height: 36px;
      line-height: 36px;
    }
  }
  .el-input__inner {
    width: 0;
    overflow: hidden;
  }
}
new Vue({
  el: "#app",
  data() {
    return {
      value: '',
    }
  }
})

查看完整代码和效果,可以到RunJS示例

宣传栏