关于Element Plus DatePicker 日期选择器 二次封装，精确到时分秒

 环境说明：

    Vue3 + Element Plus ui     

这次关于Element Plus 日期选择器组件二次封装，其中为了快速开发用到 moment 日期插件。

1.封装规则说明：

        特殊情况说明：

        1. 如果结束时间为00:00:00，那么开始时间最大为当天的00:00:00

        2.如果结束时间为23:59:59 ，那么结束时间最小为当天的23:59:59

        其他情况说明：

                结束时间大于开始时间 1个小时

        其他插件：

        moment

             

npm install moment --save

mian.js 引入

import moment from 'moment';

moment.locale('zh-cn');

app.config.globalProperties.$moment = moment

  

 

 2.代码

                

<template>

  <div class="my-el-date-picker">

    <el-date-picker v-model="startValue" :clearable="porp.clearable" :type="porp.type" @change="startTime"

      placeholder="请输入开始时间" :style="{ width: porp.width + 'px' }" :format="porp.format" :disabledDate="startDisabledDate"

      :disabled-hours="startDisabledHours" :disabled-minutes="startDisabledMinutes"

      :disabled-seconds="startDisabledSeconds" />

    <span class="my-el-data-space">-</span>

    <el-date-picker v-model="endValue" :clearable="porp.clearable" :type="porp.type" @change="endTime"

      placeholder="请输入结束时间" :style="{ width: porp.width + 'px' }" :format="porp.format" :disabledDate="endDisabledDate"

      :disabled-hours="endDisabledHours" :disabled-minutes="endDisabledMinutes" :disabled-seconds="endDisabledSeconds" />

  </div>

</template>

<script lang="ts" setup name="MyDatePicker">

import { ref, reactive, getCurrentInstance, watch } from 'vue';

import { ElMessage } from 'element-plus';

const { proxy }: any = getCurrentInstance();

const startValue = ref();

const endValue = ref();

const emit = defineEmits(['onchange'])

interface defaultTime {

  startValue: any;

  endValue: any;

}

/*

 * 父传子，接收参数

 * type:不支持 dates  datetimerange/daterange/ monthrange

 */

interface Props {

  type?: any;//日期选择器类型 year/month/date/datetime/ week/

  defaultValue?: Object; // 开始时间和结束时间

  format?: any;// 展示的时间格式，同时也是返回的时间格式

  width?: String | Number; //宽度

  clearable?: any; //是否清除按钮

  startTime?: any;//开始最小时间

  startTimeStatus?: any;//是否进行最小时间最大时间处理

  endTime?: any;//结束最小时间

  startEndNumDay?: Number | String;//开始时间和结束时间间隔的最大天数

}

/**

 * type 类型为datetime 禁止选中的时间，时分秒选择出现

 * 在类型为datetime的情况下，结束时间比开始时间大于1小时

 *

 */

const porp = withDefaults(defineProps<Props>(), {

  type: 'datetime',//时间类型

  defaultValue: () => reactive<defaultTime>({

    startValue: '',//开始时间

    endValue: '',// 结束时间

  }),

  format: 'YYYY-MM-DD HH:mm:ss',// 展示的时间格式，同时也是返回的时间格式

  width: '220',//宽度

  clearable: true,//是否清除按钮

  startTimeStatus: false,//是否进行最小时间最大时间处理

  startTime: '',//开始最小时间

  endTime: '',//结束最小时间

  startEndNumDay: '',//开始时间和结束时间间隔的最大天数

});

endValue.value = porp.defaultValue.endValue

startValue.value = porp.defaultValue.startValue

// 开始时间限制

const startDisabledDate = (time: Date) => {

  // 开始时间的最小时间

  if (porp.startTimeStatus && porp.startTime != '') {

    return time.getTime() < new Date(porp.startTime).getTime() || time.getTime() > new Date(endValue.value).getTime()

  } else if (porp.startTimeStatus && porp.startEndNumDay != '') {

    return time.getTime() < new Date(endValue.value).getTime() - 24 * 60 * 60 * 1000 * porp.startEndNumDay || time.getTime() > new Date(endValue.value).getTime()

  } else {

    return time.getTime() > new Date(endValue.value).getTime()

  }

 

}

const startDisabledHours = () => {

  const a = [];

  if (endValue.value == '') {

    return a;

  } else {

    let et = proxy.$moment(endValue.value).format('YYYY-MM-DD');

    let st = proxy.$moment(startValue.value).format('YYYY-MM-DD');

    if (new Date(endValue.value).getHours() == 0 && st == et) {

      for (let i = 0; i < 24; i++) {

        // 限制之前 < 之后 > ，下面同理

        var stx = Number(new Date(endValue.value).getHours())

        if (stx >= i) continue;

        a.push(i);

      }

      return a;

    } else if (et == st) {

      for (let i = 0; i < 24; i++) {

        // 限制之前 < 之后 > ，下面同理

        if (new Date(endValue.value).getHours() - 1 >= i) continue;

        a.push(i);

      }

      return a;

    } else {

      for (let i = 0; i < 24; i++) {

        // 限制之前 < 之后 > ，下面同理

        var stx = Number(new Date(endValue.value).getHours()) - 1

        if (stx <= i) continue;

        a.push(i);

      }

      return a;

    }

  }

};

const startDisabledMinutes = () => {

  const a = [];

  if (endValue.value == '') {

    return a;

  } else {

    let et = proxy.$moment(endValue.value).format('YYYY-MM-DD');

    let st = proxy.$moment(startValue.value).format('YYYY-MM-DD');

    if (new Date(endValue.value).getHours() == 0 && new Date(endValue.value).getMinutes() == 0 && et == st) {

      for (let i = 0; i < 60; i++) {

        // 限制之前 < 之后 > ，下面同理

        if (new Date(endValue.value).getMinutes() >= i) continue;

        a.push(i);

      }

      return a;

    } else if (et == st) {

      return a;

    } else {

      for (let i = 0; i < 60; i++) {

        // 限制之前 < 之后 > ，下面同理

        if (new Date(endValue.value).getMinutes() <= i) continue;

        a.push(i);

      }

      return a;

    }

  }

}

const startDisabledSeconds = () => {

  const a = [];

  if (endValue.value == '') {

    return a;

  } else {

    let et = proxy.$moment(endValue.value).format('YYYY-MM-DD');

    let st = proxy.$moment(startValue.value).format('YYYY-MM-DD');

    if (new Date(endValue.value).getHours() == 0 && new Date(endValue.value).getSeconds() == 0 && et == st) {

      for (let i = 0; i < 60; i++) {

        // 限制之前 < 之后 > ，下面同理

        if (new Date(endValue.value).getSeconds() >= i) continue;

        a.push(i);

      }

      return a;

    } else if (et == st) {

      return a;

    } else {

      for (let i = 0; i < 60; i++) {

        // 限制之前 < 之后 > ，下面同理

        if (new Date(endValue.value).getSeconds() <= i) continue;

        a.push(i);

      }

      return a;

    }

  }

}

// 结束时间限制

const endDisabledDate = (time: Date) => {

  //处理时分秒情况下，开始时间的时间戳问题

  if (startValue.value != '') {

    let st = proxy.$moment(startValue.value).subtract(1, 'day').format('YYYY-MM-DD') + ' 23:59:59'

    if (porp.startTimeStatus && porp.endTime != '') {

      return new Date(st).getTime() >= time.getTime() || time.getTime() > new Date(porp.endTime).getTime()

    } else if (porp.startTimeStatus && porp.startEndNumDay != '') {

      return new Date(st).getTime() >= time.getTime() || time.getTime() > new Date(startValue.value).getTime() + 24 * 60 * 60 * 1000 * porp.startEndNumDay

    } else {

      return new Date(st).getTime() >= time.getTime()

    }

  } else {

    return new Date(startValue.value).getTime() >= time.getTime()

  }

}

const endDisabledHours = () => {

  const a = [];

  if (startValue.value == '') {

    return a;

  } else {

    let et = proxy.$moment(endValue.value).format('YYYY-MM-DD');

    let st = proxy.$moment(startValue.value).format('YYYY-MM-DD');

    if (et == st && new Date(startValue.value).getHours() != 23) {

      for (let i = 0; i < 24; i++) {

        // 限制之前 < 之后 > ，下面同理

        var stx = Number(new Date(startValue.value).getHours()) + 1

        if (stx <= i) continue;

        a.push(i);

      }

      return a;

    } else if (et == st && new Date(startValue.value).getHours() == 23) {

      for (let i = 0; i < 24; i++) {

        // 限制之前 < 之后 > ，下面同理

        var stx = Number(new Date(startValue.value).getHours())

        if (stx <= i) continue;

        a.push(i);

      }

      return a;

    } else {

      // for (let i = 0; i < 24; i++) {

      //   var stx = Number(new Date(startValue.value).getHours()) + 1

      //   if (stx >= i) continue;

      //   a.push(i);

      // }

      return a;

    }

 

  }

};

const endDisabledMinutes = () => {

  const a = [];

  let et = proxy.$moment(endValue.value).format('YYYY-MM-DD');

  let st = proxy.$moment(startValue.value).format('YYYY-MM-DD');

  if (et == st && new Date(startValue.value).getHours() == 23) {

    for (let i = 0; i < 60; i++) {

      // 限制之前 < 之后 > ，下面同理

      if (new Date(startValue.value).getMinutes() <= i) continue;

      a.push(i);

    }

    return a;

  } else {

    return a;

  }

}

const endDisabledSeconds = () => {

  const a = [];

  let et = proxy.$moment(endValue.value).format('YYYY-MM-DD');

  let st = proxy.$moment(startValue.value).format('YYYY-MM-DD');

  if (et == st && new Date(startValue.value).getHours() == 23) {

    for (let i = 0; i < 60; i++) {

      // 限制之前 < 之后 > ，下面同理

      if (new Date(startValue.value).getSeconds() <= i) continue;

      a.push(i);

    }

    return a;

  } else {

    return a;

  }

}

 

const startTime = (val: any) => {

  if (val == null) {

    startValue.value = ''

  } else {

    startValue.value = val

  }

  emit('onchange', {

    startValue: startValue.value == '' ? '' : proxy.$moment(startValue.value).format(porp.format),

    endValue: endValue.value == '' ? '' : proxy.$moment(endValue.value).format(porp.format),

  })

}

const endTime = (val: any) => {

  if (val == null) {

    endValue.value = ''

  } else {

    endValue.value = val

  }

  emit('onchange', {

    startValue: startValue.value == '' ? '' : proxy.$moment(startValue.value).format(porp.format),

    endValue: endValue.value == '' ? '' : proxy.$moment(endValue.value).format(porp.format),

  })

}

</script>

<style lang="scss" scoped>

.my-el-date-picker {

  .my-el-data-space {

    margin: 0 10px;

  }

}

</style>