<template>

  <div class="datapicker">

    <el-date-picker

      @change="changTime"

      :size="size"

      v-model="time"

      type="daterange"

      :picker-options="pickerOptions"

      range-separator="至"

      start-placeholder="开始日期"

      :default-time="['00:00:00','23:59:59']"

      end-placeholder="结束日期">

    </el-date-picker>

  </div>

</template>

<script>

export default{

  data() {

    return {

      time: "",

      pickerOptions: {

        disabledDate(time) {

          if (typeof time === 'undefined') return false;

          const now = new Date();

          // 设置当前日期的23点59分59秒

          now.setHours(23, 59, 59, 0);

          return time.getTime() > now.getTime();

        }

      }

    }

  },

  props: {

    size: {

      type: String,

      default: 'small'

    },

    timelength: {

      type: Number,

      default: 10

    }

  },

  methods: {

    getTime(time) {

      var timestamp = new Date(time).getTime() / 1000; // 转换为10位时间戳

      return timestamp

    },

    changTime(val) {

      if (val) {

        const time = [];

        time[0] = this.getTime(val[0])

        time[1] = this.getTime(val[1])

        this.$emit('timeChange', time);

      } else {

        this.$emit('timeChange', []);

      }

    }

  }

}

</script>

在mian.js中全局注册

import Datepicker from "@/components/Datepicker";

Vue.component('Datepicker', Datepicker)

然后就可以全局使用