vue2.x 封装elementUI之date-picker

1.创建js文件注入组件方面页面使用，在对应的js里面导入date-picker.vue文件

1、在components文件里面创建一个index.js


import NZDatePicker from './date-picker/date-picker'
export default {
    install: (Vue) => {
        Vue.component('nz-date-picker', NZDatePicker )

       }

}

2. 创建对应的date-picker.vue文件

<template>
  <el-date-picker
    v-if="!isDoubleTime"
    @change="change"
    @blur="blur"
    :value-format="timeType == 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'"
    v-model="dateTime"
    :type="timeType"
    :placeholder="placeholder"
    :picker-options="pickerOptionsOption"
  >
  </el-date-picker>
  <el-date-picker
    v-else
    :picker-options="pickerOptionsOption"
    @change="change"
    v-model="dateTimeDbl"
    :value-format="timeType == 'datetime' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'"
    :type="timeType"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
  >
  </el-date-picker>
</template>
<script>
export default {
  data() {
    return {
      dateTime: "", //单个默认时间展示
      dateTimeDbl: [], //多个默认时间展示
      pickerOptionsOption: null, //默认时间的处理
      // value: "",
    };
  },
  props: {
    // 是否是时间组合
    isDoubleTime: {
      default() {
        return false;
      },
      type: Boolean,
    },
    //单个默认时间展示
    defaultTime: {
      default() {},
    },
    //多个默认时间展示
    defaultTimeDbl: {
      default() {
        return [];
      },
      type: Array,
    },
    //时间类型  datetime  /   date   是否需要时分秒
    timeType: {
      default() {
        return "date";
      },
      type: String,
    },
    placeholder: {
      default() {
        return "开始时间";
      },
      type: String,
    },
    // 快捷时间的展示 只用传天数  不用就传[]  空数组
    pickerOptionsArr: {
      default() {
        return [];
      },
      type: Array,
    },
  },
  mounted() {
    if (!this.isDoubleTime) {
      this.dateTime = this.defaultTime;
    } else {
      this.dateTimeDbl = this.defaultTimeDbl;
    }
    this.init();
  },
  methods: {
    init() {
      if (!this.pickerOptionsArr.length) return;
      // 单个时间的数据展示
      if (!this.isDoubleTime) {
        this.pickerOptionsOption = {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [],
        };
        this.pickerOptionsArr.forEach((e) => {
          this.pickerOptionsOption.shortcuts.push({
            text: e > 0 ? `${e}天前` : "今天",
            onClick(picker) {
              const date = new Date();
              if (!e) {
                picker.$emit("pick", date);
              } else {
                date.setTime(date.getTime() - 3600 * 1000 * e * 24);
                picker.$emit("pick", date);
              }
            },
          });
        });
      }
      // 多个时间的快捷选择
      else {
        this.pickerOptionsOption = { shortcuts: [] };
        this.pickerOptionsArr.forEach((e) => {
          this.pickerOptionsOption.shortcuts.push({
            text:  `最近${e}天` ,
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * e);
              picker.$emit("pick", [start, end]);
            },
          });
        });
      }
    },
    change() {
      let time = [];
      if (this.isDoubleTime) {
        this.dateTimeDbl.forEach((e) => {
          time.push(e);
        });
      } else {
        time.push(this.dateTime);
      }
      this.$emit("dataPickerChange", time);
    },
    blur(v) {
      if (!v.value) this.dateTime = "";
    },
  },
};
</script>

<style lang="scss" scope>
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  .el-input__inner {
    width: 100%;
  }
}
.el-date-picker__time-header .el-input__inner {
  width: 100%;
}
</style>

3.使用方法

<template>
  <div>
    <!--
        单个时间的使用
dataTime ：默认时间展示
 timeType  是否展示时分秒  datetime 展示  默认date
 dataPickerChange  回调
 pickerOptions  快捷展示
    <mjb-data-picker
      :defaultTime="dataTime"
      :timeType="timeType"
      :placeholder="placeholder"
      @dataPickerChange="dataPickerChange"
    ></mjb-data-picker>
    
        两个个时间的使用
defaultTime ：默认时间展示
 timeType  是否展示时分秒  datetimerange 展示  默认date
 dataPickerChangeT  回调
 pickerOptions  快捷展示
    <mjb-data-picker-two
      :defaultTime="defaultTime"
      @dataPickerChangeT="dataPickerChangeT"
      :timeType="timeTypeT"
      :pickerOptions="pickerOptionsTwo"
    ></mjb-data-picker-two>

      -->

    <div>
      <div>
        <span>时间选择没时分秒</span>
        <nz-data-picker
          :defaultTime="dataTime"
          :placeholder="placeholder"
          :pickerOptionsArr="[]"
          @dataPickerChange="dataPickerChange"
        ></nz-data-picker>
      </div>
      <span>时间选择有时分秒</span>
      <nz-data-picker
        :defaultTime="dataTime"
        :timeType="timeType"
        :placeholder="placeholder"
        :pickerOptionsArr="[]"
        @dataPickerChange="dataPickerChange"
      ></nz-data-picker>
    </div>
    <div>
      <span>时间快捷选择</span>
      <nz-data-picker
        :defaultTime="dataTime"
        :timeType="timeType"
        :placeholder="placeholder"
        :pickerOptionsArr="[1, 5, 10]"
        @dataPickerChange="dataPickerChange"
      ></nz-data-picker>
    </div>
    <div>
      <span>时间区间选择</span>
      <nz-data-picker
        isDoubleTime
        :defaultTimeDbl="defaultTimeDbl"
        @dataPickerChangeT="dataPickerChangeT"
        :timeType="timeTypeDbl"
        :pickerOptionsArr="[7, 15, 30]"
      ></nz-data-picker>
    </div>
 
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeType: "datetime", //datetime/date 是否展示时分秒  单个时间展示 默认是展示年月日
      timeTypeDbl: "datetimerange", //daterange/datetimerange 是否展示时分秒  时间区间展示 默认是展示年月日

      dataTime: new Date(),
      // dataTime: new Date(2000, 10, 10, 10, 10),
      // defaultTimeDbl: ["2021-01-01", "2021-02-01"],
      defaultTimeDbl: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],

      placeholder: "占位符",
    };
  },
  mounted() {},
  methods: {
    //   时间修改回调
    dataPickerChange(time) {
      console.log(time);
      this.dataTime = time;
    },
    //   时间修改回调
    dataPickerChangeT(time) {
      console.log(time);
    },
  },
};
</script>