How to display DatePicker directly in element-ui

DatePick is used as a Form component

now I want it to be expanded by default, and I don"t want the input box to be displayed on the page all the time. What can I do?

Element-ui
Mar.17,2021

you can use the built-in components in packages of element-ui . The simple operation is as follows:
first create a DatePanel.vue

in the project's component directory . / components/ . 
<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>

then configure webpack or vue.config.js . Here's an example of vue.config.js configuration 

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')
  }
}

finally use

in other components 
<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>

I gave you a rough look at awesome-vue-sharpdate-picker .

for example, charliekassel/vuejs-datepicker this,
has a < datepicker: inline=" true "> < / datepicker > , the effect should be exactly what you want, only the selection panel, no input box.
/ DEMO running result , you may need a ladder, otherwise there are resources that cannot be loaded.

if the style doesn't match, you may need to refer to the source code to write your own component.
I looked for it. Take 1.4.10 as an example, the date or time that pops up selects the source code of the panel component node_modules/_element-ui@1.4.10@element-ui/packages/date-picker/src/panel/ 

// 
date.vue
// 
time.vue

look more at the official ecology. In fact, many of them already have ready-made wheels, not necessarily using other people's wheels, but they can also provide a self-made idea, which is also a good opportunity for exercise

writes you an example of expanding the date selector by default to see if there is any inspiration: https://jsfiddle.net/luozz/oj.

.
I hope my answer will be helpful to you!

how did you deal with the landlord's problem in the end?

Previous: Problems related to the conversion from sass Px to rem

Next: How to use value? of input type= "file"

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu