vue element DateTimePicker日期时间选择器二次封装

在管理系统项目开发中，使用elementUi库日期时间选择器是最常见的也是最常用，需要使用的话一个一个写的很麻烦而且不方便使用，封装成组件的话方便于管理只要用就调用这个组件就可以使用。

子组件：
type显示类型 可以分别为 year/month/date/week/datetime/datetimerange/daterange
valueFormat 绑定值的格式,一般是参数传到后台的数据格式
pickerOptions: 快捷键以及配置项
defaultTime：选中日期后的默认具体时刻 数据格式为数组 [‘00:00:00’, ‘23:59:59’]

  <div>
     <el-date-picker
     @change="changeTimeValue"
      v-model="selectTimeDate"
      :type="type"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :value-format="valueFormat"
      :picker-options="pickerOptions"
      :default-time="defaultTime"
     >
    </el-date-picker>
<script>
export default {
  props: {
    type: {
      type: String,
      required: true
    },
    valueFormat: {
      type: String,
      default: ''
    },
    pickerOptions: {
      type: Object,
      default: () => {
        return {}
      }
    }, 
    defaultTime: {
      type: Array,
      default: () => {
        return []
      }
    },
    vModel: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data() {
    return {
      selectTimeDate: []
    }
  },
  watch: {
    vModel(val) {
      this.selectTimeDate = val
    }
  },
  methods: {
    changeTimeValue(val) {
      this.$emit('changeTimeValue', val)
    }
  }
}
</script>

父组件：

 <data-picker 
      :type="'datetimerange'" 
      :valueFormat="'yyyy-MM-dd HH:mm:ss'" 
      :pickerOptions="pickerOptions" 
      :defaultTime="['00:00:00','23:59:59']"
      @changeTimeValue="changeTimeValue"
      :vModel="dateTimeRangeVal"
     ></data-picker>
<script>
import dataPicker from '@/components/dataPicker.vue'
export default {
  components: {
    dataPicker
  },
  data() {
    return {
     pickerOptions: {
        shortcuts: [{
        text: '今天',
        onClick(picker) {
            const end = new Date();
            const start = new Date(new Date(new Date().getTime()).setHours(0, 0, 0, 0));
            picker.$emit('pick', [start, end]);
        }
        }, {
        text: '昨天',
        onClick(picker) {
            const start=new Date(new Date(new Date().getTime()-24*60*60*1000).setHours(0, 0, 0, 0));
            const end=new Date(new Date(new Date().getTime()-24*60*60*1000).setHours(23, 59, 59, 999));
            picker.$emit('pick', [start, end]);
        }
        },{
        text: '最近一周',
        onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
        }
        }, {
        text: '最近一个月',
        onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
        }
        }, {
        text: '最近三个月',
        onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
        }
        }]
     },
     dateTimeRangeVal: []
    }
  },
  methods: {
   // 子组件传过来的值 以下是对选着的值最大区间限制在6个月之内 不需要直接赋值就行
    changeTimeValue(val) {
      if(val) {
        let min = new Date(val[0])
        let max = new Date(val[1])
        let now = new Date()
        let min6 = new Date(Date.now() - (30 * 24 * 3600 * 1000)*6)
        let timeSection = new Date((max.valueOf() - (30 * 24 * 3600 * 1000)*6)).Format("yyyy-MM-dd hh:mm:ss.S")
        let cha = (max.getFullYear() - min.getFullYear() > 0) ? (max.getMonth() + (max.getFullYear() - min.getFullYear()) * 12) : (max.getMonth() - min.getMonth())
        if(max>now && min > min6) {
            this.dateTimeRangeVal = [min.Format("yyyy-MM-dd hh:mm:ss.S"), now.Format("yyyy-MM-dd hh:mm:ss.S")]
        } else if(max > now && min < min6) {
            this.dateTimeRangeVal = [min6.Format("yyyy-MM-dd hh:mm:ss.S"), now.Format("yyyy-MM-dd hh:mm:ss.S")]
        }else if(cha > 6 && max<now) {
            this.dateTimeRangeVal = [timeSection, max.Format("yyyy-MM-dd hh:mm:ss.S")]
        } else {
            this.dateTimeRangeVal = [min.Format("yyyy-MM-dd hh:mm:ss.S"), max.Format("yyyy-MM-dd hh:mm:ss.S")]
        }
      }
    }
  }
}
</script>