vue3+ant design vue3+ts 日期选择框DatePicker预设常用的日期范围封装自用

1、组件代码如下：

<template>
  <div class="time_pink_box" :class="{ 'activebox': isClicks }">
    <div class="lefts" v-if="isClicks" @click="pickerShow = !pickerShow">
      <SvgIcon name="calendar" width="18px" height="18px" />
      <span class="init_dayes" style="margin-right: 12px">{{ isClickname }}</span>
      <span></span>
    </div>
    <div>
      <a-range-picker :open="pickerShow" show-time dropdownClassName="range-picker-custom new_dropdownClassName_pinkes"
        :format="dateFormat" @change="handTime" v-model:value="value2" ref="range" :allowClear="allowClear"
        :bordered="false" @click="pickerShow = !pickerShow" @calendarChange="calendarPicker">

        <template #renderExtraFooter>
          <div class="extra_box">
            <div class="title">快速选择</div>
            <div class="list">
              <div class="list-item" :class="{ 'successItem': index == successValue }"
                @click="changeTime(item.value, item.type, index, item)" v-for="(item, index) in itemList"
                style="color: black">{{
                  item.label
                }}</div>
            </div>
          </div>
        </template>
        <!--       自定义样式-->
        <!--       <template #dateRender="{ current }">-->
        <!--         <div class="ant-picker-cell-inner" :style="getCurrentStyle(current)">-->
        <!--           {{ current.date() }}-->
        <!--         </div>-->
        <!--       </template>-->
        <!--       自定义图标-->
        <template #suffixIcon>
          <span>
            <SvgIcon v-if="isIcones" name="gxtDataPinkes" width="22px" height="22px" />
          </span>
        </template>
      </a-range-picker>
    </div>
  </div>
</template>

<script lang="ts" >
import dayjs, { Dayjs } from 'dayjs';
import { ref, watch } from 'vue';
export default {
  name: "Time",
  props: {
    defaultTime: {
      type: Array,
      require: true
    },
    allowClear: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { emit }) {
    // const dateFormat = ['YYYY/MM/DD HH:mm:ss','YYYY/MM/DD HH:mm:ss'];
    const pickerShow = ref(false);
    const dateFormat = 'YYYY-MM-DD HH:mm:ss';
    const successValue = ref(null)
    const range = ref()
    const value2 = ref(props.defaultTime)
    watch(
      () => props.defaultTime,
      (val) => {
        value2.value = props.defaultTime
        successValue.value = null
      }, {
      deep: true
    }
    )
    const isClicks = ref(true)
    const spacedata = new Date(props.defaultTime[1]) - new Date(props.defaultTime[0])

    const isClickname = ref('今天')
    const isIcones = ref(false)
    const resetTime = (type) => {
      isClickname.value = '今天';
      isClicks.value = true;
      if (type == 'empty') {
        successValue.value = null;
        value2.value = []
      }
    }
    const changeTime = (value, type, index, item) => {
      console.log(value, type);
      successValue.value = index
      isClickname.value = item.label
      if (value) {
        value2.value = [
          dayjs().subtract(value, type), dayjs()
        ]

      } else if (type == 'day') {
        value2.value = [
          dayjs().subtract(1, 'day').startOf(type), dayjs().subtract(1, 'day').endOf(type)
        ]
      } else if (type == 'week') {
        // value2.value = [
        //   dayjs().startOf(type).subtract(6, 'day'), dayjs()
        // ]
        // value2.value = [dayjs().startOf('week').add(1, 'day'), dayjs().endOf('week').add(1, 'day')]
        value2.value = [dayjs().subtract(dayjs().day() ? dayjs().day() - 1 : 6, "day").startOf('date'), dayjs().add(dayjs().day() ? 7 - dayjs().day() : dayjs().day(), "day").endOf('date')]
      } else if (type == 'month') {
        value2.value = [
          dayjs().startOf('month'), dayjs().endOf('month')
        ]
      } else {
        value2.value = [
          dayjs().startOf(type), dayjs().endOf(type)
        ]
      }

      range.value.blur()
      isClicks.value = true
      isIcones.value = false;
      pickerShow.value = !pickerShow.value;
      emit("changcilck", [dayjs(value2.value[0]).format(dateFormat), dayjs(value2.value[1]).format(dateFormat)])
    }
    const calendarPicker = (dates: [dayjs, dayjs] | [string, string], dateStrings: [string, string], info: { range: start | end }) => {

      if (info.range == 'end') {
        pickerShow.value = false;
      }
    }
    const handTime = (dataString: string) => {
      successValue.value = null
      isClicks.value = false
      isIcones.value = true
      emit("changes", dataString)
      // pickerShow.value = !pickerShow.value;
    }
    const disabledDate = (current: Dayjs) => {
      return current && current > dayjs()
    };
    const itemList = [
      {
        label: "今天",
        type: 'date'
      },
      {
        label: "过去10分钟",
        value: "10",
        type: "minute"
      }, {
        label: "昨日",
        type: "day"
      },
      {
        label: "过去30分钟",
        value: "30",
        type: "minute"
      },
      {
        label: "本周",
        type: "week"
      },
      {
        label: "过去1小时",
        value: "1",
        type: "hour"
      },
      {
        label: "本月",
        type: "month"
      },
      {
        label: "过去3小时",
        value: "3",
        type: "hour"
      },
      {
        label: "过去30天",
        value: "30",
        type: "day"
      },
      {
        label: "过去6小时",
        value: "6",
        type: "hour"
      },
      {
        label: "过去60天",
        value: "60",
        type: "day"
      },
      {
        label: "过去12小时",
        value: "12",
        type: "hour"
      },

    ]
    return {
      pickerShow,
      resetTime,
      handTime,
      range,
      changeTime,
      dateFormat,
      isClicks,
      isIcones,
      isClickname,
      itemList,
      calendarPicker,
      disabledDate,
      value2,
      successValue,
    }
  }
}

</script>
<style scoped lang="less">
:deep(.ant-picker-suffix) {
  width: 10px;

  span {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-53%);
  }
}

//:deep(.ant-picker){
//  width: 420px!important;
//}
//:deep(.ant-picker-range){
//  width: 420px!important;
//}
.time_pink_box {
  display: flex;
  align-items: center;
  border: 1px solid #d9d9d9;

  //padding-left: 12px;
  //border-right: 1px;
  .lefts {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-family: HelveticaNeue;
    color: rgba(0, 0, 0, 0.85);

    span {
      &:nth-of-type(1) {
        letter-spacing: 1px;
        white-space: nowrap;
      }

      &:nth-of-type(2) {
        width: 1px;
        height: 13px;
        background: rgba(0, 0, 0, 0.85);
        //border: 0.5px solid  rgba(0,0,0,0.85);
      }
    }

    .init_dayes {
      padding-top: 2px;
      margin-left: 12px;
    }
  }
}

.activebox {
  padding-left: 12px;
}

:deep(.ant-picker) {
  position: relative;
  padding-right: 0px;

  //padding-left: 0px;
  .ant-picker-input {
    &:nth-of-type(1) {
      //margin-left: 90px;
    }
  }
}

.timews {
  position: absolute;
  display: flex;
  align-items: center;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-family: HelveticaNeue;
  color: rgba(0, 0, 0, 0.85);
}

/*.new_dropdownClassName_pinkes{*/
/*  width: 420px!important;*/
/*}*/
.time_pink_box :deep(.ant-picker-cell-in-view.ant-picker-cell-in-range::before) {
  background: none !important;
}

.time_pink_box :deep(.ant-picker-panel-container) {
  border-bottom-left-radius: 0px;
}

.range-picker-custom .ant-picker-footer-extra .extra_box {
  position: absolute !important;
  top: 7px;
  left: -207px;
  background: #fff;
  width: 207px;
  height: calc(100% - 13px);
  /* height: 314px; */
  padding: 9px 8px 28px 15px;
  box-shadow: -8px 5px 10px -1px rgb(0 0 0 / 12%);
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 2px;
  border-top-left-radius: 2px;
}

.range-picker-custom .ant-picker-footer .ant-picker-ranges {
  line-height: unset !important;
  padding: 3px 12px;
}

.title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
}

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.list-item {
  width: 88px;
  height: 28px;
  background: #FAFAFA;
  line-height: 28px;
  text-align: center;
  border-radius: 2px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.successItem {
  background: #03985A;
  color: #FFFFFF !important;
}
</style>

2、父组件中使用

<template>
<date-picker @changcilck="changeOriginTime" @changes="changeOriginTime" :defaultTime="timeValue"
            ref="originTimePickerRef" :allowClear="true"></date-picker>
</template>
<script lang="ts" setup>
import dayjs, { Dayjs } from 'dayjs'
import { ref, watch } from 'vue'
const originTimePickerRef=ref();
const timeValue = ref<[Dayjs, Dayjs]>([dayjs().startOf('date'), dayjs().endOf('date')]);//日期组件 默认显示今天
const startTransDate=ref(null);//页面所需开始日期时间
const endTransDate=ref(null);//页面所需结束日期时间
const changeOriginTime = (timeString) => {
  if (timeString && timeString.length > 0) {
    startTransDate.value = dayjs(timeString[0]).format('YYYY-MM-DD HH:mm:ss')
    endTransDate.value = dayjs(timeString[1]).format('YYYY-MM-DD HH:mm:ss')
  } else {
    startTransDate.value = ''
    endTransDate.value = ''
  }
}

//originTimePickerRef.value.resetTime()//组件选择的日期时间设置成今天
//originTimePickerRef.value.resetTime('empty')//组件选择的日期时间设置为空
</script>

3、效果如图