vue3基础组件开发detePicker日期选择组件示例

<template>
  <div>
      <-- 这里放input框 -->
      <div></div>
      <-- 点击input弹出日历 -->
      <div>
          <-- 头部 -->
          <div></div>
          <-- 星期 -->
          <div></div>
          <-- 日历主体 -->
          <div></div>
          <-- 按钮组 -->
          <div></div>
      </div>
  </div>
</template>

  <div class="block w-full h-[32px] relative border rounded-md">
      <input
        class="placeholder:text-[#B2B2B2] block w-full h-full rounded-md py-2 pl-2 pr-9 text-sm focus:outline-none focus:ring-0"
        disabled
        placeholder="选择时间"
        type="text"
        maxlength="32"
      />
      <div
        class="absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer"
      >
        <svg class="w-4 h-4 fill-[#C2C2C2]">
          <use xlink:href="#icon-riqi" rel="external nofollow"  />
        </svg>
      </div>
    </div>

<div class="flex justify-center">
  <svg class="w-4 h-4 fill-[#C2C2C2] rotate-90 cursor-pointer">
    <use xlink:href="#icon-down" rel="external nofollow"  rel="external nofollow"  />
  </svg>
  <span class="text-xs mx-5">二月2023</span>
  <svg class="w-4 h-4 fill-[#C2C2C2] rotate-[270deg] cursor-pointer">
    <use xlink:href="#icon-down" rel="external nofollow"  rel="external nofollow"  />
  </svg>
</div>

<div
  class="grid grid-cols-7 auto-cols-[20px] auto-rows-[20px] text-xs mt-2 mx-[9px] justify-items-center gap-x-2.5"
>
  <span>一</span>
  <span>二</span>
  <span>三</span>
  <span>四</span>
  <span>五</span>
  <span>六</span>
  <span>日</span>
</div>

<div
  class="grid grid-cols-7 auto-cols-[20px] auto-rows-[20px] text-xs mt-2 mx-[9px] gap-y-2 gap-x-2.5"
>
  <span
    :class="[
      'cursor-pointer w-full h-full  flex justify-center items-center',
      v.color,
      {
        '!bg-[#60C2CC] rounded-full !text-white':
          actives.one === v.time || actives.two === v.time,
      },
      setBgColor(v.time),
    ]"
    v-for="(v, i) in days"
    :key="i"
    >{{ v.day }}</span
  >
</div>

<div class="flex justify-between items-center mt-2.5 mx-[9px]">
  <span class="text-xs text-[#9C9C9C]">跳到今天</span>
  <div
    class="w-[50px] h-5 bg-[#60C2CC] rounded-lg text-white leading-5 text-center text-xs"
  >
    确定
  </div>
</div>

// 控制显示的变量
const isShow = ref(false)
// 点击按钮的时候显示
const openTimeSelect = () => {
  isShow.value = true
}
// 点击确定，或者点击日历主体外的任何窗体的时候关闭，关闭的时候清空选中
const closeTimeSelect = () => {
  isShow.value = false
  actives.one = ''
  actives.two = ''
}

// 本组件唯一定义的类型
interface DaysType {
  day: number
  color: string
  time: string
}
const date = new Date() // 时间
const year = ref(0) // 年
const month = ref(0) // 月
const days = ref<DaysType[]>([]) // 需要循环渲染的日历主体数据
// 选中某天的数据，可以选中两天
const actives = reactive({
  one: '',
  two: '',
})
// 计算属性，把当前点击选中的日期转换成时间戳
const oneTimeNum = computed(() => new Date(actives.one).getTime())
const twoTimeNum = computed(() => new Date(actives.two).getTime())

const updateTime = () => {
  days.value = []
  year.value = date.getFullYear() // 获取当前年
  month.value = date.getMonth() + 1 // 获取当前月份
  const curDays = new Date(year.value, month.value, 0).getDate() // 当前月的天数
  let curWeek = new Date(year.value, month.value - 1, 1).getDay() // 这个月第一天星期几
  curWeek <= 0 ? (curWeek = 7) : curWeek // 如果值是0的话，那么本月第一天是周日
  const preDays = new Date(year.value, month.value - 1, 0).getDate() // 上个月的天数
  const preLastDay = curWeek - 1 // 获取上一个月有多少天
  // 插入上一个月的日期
  for (let i = 0; i < preLastDay; i++) {
    days.value.unshift({
      day: preDays - i,
      color: 'text-[#CECECE]',
      time: `${year.value}-${month.value - 1}-${preDays - i}`,
    })
  }
  // 插入本月的日期
  for (let i = 1; i <= curDays; i++) {
    days.value.push({
      day: i,
      color: 'text-[#191919]',
      time: `${year.value}-${month.value}-${i}`,
    })
  }
  const lastPreDays = 42 - curDays - preLastDay
  // 插入下个月的日期
  for (let i = 1; i <= lastPreDays; i++) {
    days.value.push({
      day: i,
      color: 'text-[#CECECE]',
      time: `${year.value}-${month.value + 1}-${i}`,
    })
  }
}

// 上一月
const prevMonth = () => {
  date.setMonth(date.getMonth() - 1)
  updateTime()
}
// 下一月
const nextMonth = () => {
  date.setMonth(date.getMonth() + 1)
  updateTime()
}

const selectTime = (item: DaysType) => {
  const timeNum = new Date(item.time).getTime()
  if (!actives.one || timeNum < oneTimeNum.value) {
    actives.one = item.time
  }
  if (!actives.two || timeNum > oneTimeNum.value) {
    actives.two = item.time
  }
}

const setBgColor = (time: string) => {
  const timeNum = new Date(time).getTime()
  if (
    oneTimeNum.value &&
    twoTimeNum.value &&
    oneTimeNum.value <= timeNum &&
    timeNum <= twoTimeNum.value
  ) {
    return 'bg-[#DFF3F5]'
  }
}