element-ui中如何直接显示DatePicker

Question

DatePick是作为Form组件使用的

我现在想让它默认是展开状态，并不想要输入框，而且是一直显示在页面中的，有什么办法？

Answer 1

可以使用element-ui的packages中的内置组件，简单操作如下：
首先在项目的组件目录./components/中创建一个DatePanel.vue

<template>
  <div class="date-panel">
    <date-panel ref="datePanel" @pick="pick"></date-panel>
  </div>
</template>
<script>
import DatePanel from 'element-ui/packages/date-picker/src/panel/date.vue';

export default {
  props: {
    date: {
      default: new Date(),
      type: Date
    },
    showTime: {
      default: false,
      type: Boolean
    }
  },
  components: {
    DatePanel,
  },
  model: {
    prop: 'date',
    event: 'change'
  },
  mounted() {
    this.$refs.datePanel.value = this.date;
    this.$refs.datePanel.showTime = this.showTime;
    this.$refs.datePanel.visible = true;
  },
  methods: {
    pick(date) {
      this.$refs.datePanel.value = date;
      this.$refs.datePanel.resetView && this.$refs.datePanel.resetView();
      this.$emit("change", date);
    },
  },
}
</script>
<style scoped>
  .date-panel >>> .el-picker-panel__footer{ display: none!important; }
  .date-panel >>> .el-picker-panel{box-shadow:none;border:0}
</style>

然后配置webpack或vue.config.js，这里例子为vue.config.js的配置

const path = require("path");

function resolve (dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  // 由于项目里用的element-ui的内置组件，这里需要添加对应路径去转
  chainWebpack: config => {
    config.module
      .rule('compile')
        .test(/\.js$/)
        .include
          .add(resolve('node_modules/element-ui/packages'))
          .add(resolve('node_modules/element-ui/src'))
          .end()
        .exclude
          .add(resolve('node_modules/element-ui/src/utils/date.js'))
          .end()
        .use('babel')
        .loader('babel-loader')
  }
}

最后在其他组件中使用

<template>
  <div id="test">
    <DatePanel v-model="date" :show-time="true" />
  </div>
</template>

<script>
import DatePanel from './components/DatePanel.vue'

export default {
  name: 'test',
  components: {
    DatePanel,
  },
  data() {
    return {
      // 组件使用的时间对象
      date: new Date(),
      // 是否显示时分秒
      showTime: false,
    };
  },
  watch: {
    date(val) {
      console.log(val);
    }
  }
}
</script>

Answer 2

我给你在awesome-vue#date-picker大致找了一下

例如charliekassel/vuejs-datepicker这个，
就有一个<datepicker :inline="true"></datepicker>，效果应该就是你想要的，仅仅只有选择面板，没有输入框。
DEMO / DEMO运行结果，可能需要梯子，不然有资源加载不出来。

如果样式什么的不符合的话，那你可能需要参考源码自己写个组件了。
我找了一下，以1.4.10为例，弹出的日期或时间选择面板组件源码node_modules/_element-ui@1.4.10@element-ui/packages/date-picker/src/panel/

// 日期
date.vue
// 时间
time.vue

多看看官方的生态，其实好多都已经有现成轮子了，不一定用别人的轮子，但也能提供一个自己造的思路，自己造也是个锻炼的好机会

Answer 3

给你写了一个默认展开日期选择器的例子，看看有没有所启发：https://jsfiddle.net/luozz/oj...

希望我的回答对你有所帮助！

Answer 4

楼主的问题最后怎么处理的？