elementUI关于时间，日期组件的使用

Element UI是一款基于Vue.js的前端UI框架，它提供了一系列的组件用于构建界面。以下是一些Element UI中与时间和日期相关的组件的简单使用示例：

1. el-date-picker：日期时间选择器

<template>
  <el-date-picker
    v-model="value"
    type="date"
    placeholder="选择日期">
  </el-date-picker>
</template>
 
<script>
  export default {
    data() {
      return {
        value: ''
      };
    }
  };
</script>

2. el-time-picker：时间选择器

<template>
  <el-time-picker
    v-model="value"
    placeholder="选择时间">
  </el-time-picker>
</template>
 
<script>
  export default {
    data() {
      return {
        value: new Date(2020, 1, 1, 12, 0)
      };
    }
  };
</script>

3. el-time-select：时间下拉选择器

<template>
  <el-time-select
    v-model="startTime"
    :picker-options="{start: '08:30', step: '00:15', end: '18:30'}"
    placeholder="开始时间">
  </el-time-select>
  <el-time-select
    v-model="endTime"
    :picker-options="{start: '08:30', step: '00:15', end: '18:30', minTime: startTime}"
    placeholder="结束时间">
  </el-time-select>
</template>
 
<script>
  export default {
    data() {
      return {
        startTime: '',
        endTime: ''
      };
    }
  };
</script>

4. el-calendar：日历

<template>
  <el-calendar v-model="dateValue"></el-calendar>
</template>
 
<script>
  export default {
    data() {
      return {
        dateValue: new Date()
      };
    },
    methods: {
      getDate(date) {
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        return year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
      }
    }
  };
</script>

以上代码展示了如何在Vue.js应用中使用Element UI的日期时间组件来选择日期、时间以及进行日期的基本操作。在实际应用中，你需要确保已经正确安装并导入了Element UI，并且在Vue.js项目中正确使用。