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

一、日期选择器（DatePicker）

1.带有快捷键的使用，参考代码：

<template>
  <div class="block">
    <span class="demonstration">带快捷选项</span>
    <el-date-picker
      v-model="value"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //主要是这个属性
        pickerOptions: {
          // 禁用当天之前的时间选择
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value: ''
      };
    }
  };
</script>

2.默认时间的使用（选择范围日期时间的时候）

<template>
  <div class="block">
    <p>组件值：{{ value }}</p>
    //type类型是daterange的时候用，default-time一般配合value-format使用
    <el-date-picker
      v-model="value"
      type="daterange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['00:00:00', '23:59:59']"
      :value-format="yyyy-MM-dd HH:mm:ss"
     </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: ''
      };
    },
    created() {
      //不修改组件展示的默认类型，则界面中无操作默认显示的是当时的年-月-日 时:分:秒，
      //例如2024-01-30 15:20:33，但是操作组件之后值的格式一般是中国标准时间；         
      //但value的实际值是：2024-01-30 00:00:00或者2024-01-30 23:59:59

      //value-format规定操作组件之后拿到的数据格式（非初始化的默认数据格式，区别上三行）
      console.log(value)
    }
  };
</script>

3.整体例子：一般情况日期时间组件会默认初始有一个时间或者时间段（默认七天前到当天）

<template>
  <div class="block">
    <el-date-picker
      v-model="value"
      type="daterange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['00:00:00', '23:59:59']"
      :value-format="yyyy-MM-dd HH:mm:ss"
       @change="getEstabDate"
     </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: [],
        start: '',
        end: ''
      };
    },
    created() {
      this.start = this.getOldTime()
      this.end = this.getNowTime()
      this.value = [this.start, this.end]
    },
    method: {
      //七天前
      getOldTime() {
        var date = new Date(new Date().getTime() - 7*24*60*60*1000)
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        m = m < 10 ? "0" + m : m
        var d = date.getDate()
        d = d < 10 ? "0" + d : d
        var h = date.getHours()
        h = h < 10 ? "0" + h : h
        var minute = date.getMinutes()
        minute = minute < 10 ? "0" + minute : minute
        var seconds = date.getSeconds()
        seconds = seconds < 10 ? "0" + seconds : seconds
        let time = y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + seconds
        return time
      },
      //当前时间
      getNowTime() {
        var date = new Date()
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        m = m < 10 ? "0" + m : m
        var d = date.getDate()
        d = d < 10 ? "0" + d : d
        var h = date.getHours()
        h = h < 10 ? "0" + h : h
        var minute = date.getMinutes()
        minute = minute < 10 ? "0" + minute : minute
        var seconds = date.getSeconds()
        seconds = seconds < 10 ? "0" + seconds : seconds
        let time = y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + seconds
        return time
      },
      //操作之后拿到具体的数据
      getEstabDate(val) {
        this.start = val[0]
        this.end = val[1]
      },
    }
  };
</script>