日(type=“daterange“),周,月时间选择器(基于elementUI)

父组件

?showType=1&startDate=2024-09-20&endDate=2024-09-20

?showType=2&yearWeek=2024-38

?showType=3&startYearMonth=2024-09&endYearMonth=2024-09

<template>
  <date-range-picker v-model="value" :type.sync="groupType" @handleChangeTime="handleChangeTime" />
</template>

<script>
export default {
  data() {
    return {
      value: [new Date(), new Date()],
      groupType: 'date'
    }
  },
  methods: {
    handleChangeTime(timeStr) {
      switch (this.groupType) {
        case 'date':
          this.queryParams = {
            showType: '1',
            startDate: timeStr[0],
            endDate: timeStr[1]
          }
          break
        case 'week':
          this.queryParams = {
            showType: '2',
            yearWeek: timeStr
          }
          break
        case 'month':
          this.queryParams = {
            showType: '3',
            startYearMonth: timeStr[0],
            endYearMonth: timeStr[1]
          }
          break
      }
      this.handleQuery()
    }
  }
}
</script>

子组件

<template>
  <div class="date-picker">
    <el-radio-group v-model="dateType" size="small" @change="handleChange">
      <el-radio-button label="date">日</el-radio-button>
      <el-radio-button label="week">周</el-radio-button>
      <el-radio-button label="month">月</el-radio-button>
    </el-radio-group>
    <el-date-picker
      v-if="showDatePicker&&dateType === 'date'"
      v-model="dateValue"
      value-format="yyyy-MM-dd"
      :clearable="false"
      size="small"
      :picker-options="{ firstDayOfWeek: 1 }"
      style="width: 220px;"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="handleChange"
    />
    <el-date-picker v-if="showDatePicker&&dateType === 'week'" v-model="dateValue" type="week" format="yyyy 第 WW 周" :clearable="false" size="small" :picker-options="{ firstDayOfWeek: 1 }" placeholder="选择周" style="width: 220px;" @change="handleChange" />
    <el-date-picker
      v-if="showDatePicker&&dateType === 'month'"
      v-model="dateValue"
      value-format="yyyy-MM"
      :clearable="false"
      size="small"
      :picker-options="{ firstDayOfWeek: 1 }"
      style="width: 220px;"
      type="monthrange"
      range-separator="至"
      start-placeholder="开始月份"
      end-placeholder="结束月份"
      @change="handleChange"
    />
  </div>
</template>

<script>
export default {
  name: 'DateRangePicker',
  props: {
    // eslint-disable-next-line
    value: {
      type: [Array, Date]
    },
    type: {
      type: String,
      default: 'date'
    }
  },
  data() {
    return {
      showDatePicker: true,
      dateType: this.type,
      dateValue: this.value
    }
  },
  watch: {
    value(val) {
      this.dateValue = val
    },
    type(val) {
      this.dateType = val
    },
    dateValue(val) {
      this.$emit('input', val)
    },
    dateType(val) {
      if (val === 'week' && Array.isArray(this.dateValue)) {
        this.dateValue = new Date()
      } else if ((val === 'date' || val === 'month') && !Array.isArray(this.dateValue)) {
        this.dateValue = [new Date(), new Date()]
      }
      this.$emit('update:type', val)
    }
  },
  methods: {
    handleChange() {
      this.showDatePicker = false
      this.$nextTick(() => {
        this.showDatePicker = true
      })
      const timeStr = this.timeDifference(this.dateValue, this.dateType)
      this.$emit('handleChangeTime', timeStr)
    },
    timeDifference(dateValue, dateType) {
      let timeStr
      switch (dateType) {
        case 'date':
          timeStr = [this.parseTime(dateValue[0], '{y}-{m}-{d}'), this.parseTime(dateValue[1], '{y}-{m}-{d}')]
          break
        case 'week':
          timeStr = this.formatWeek(dateValue)
          break
        case 'month':
          timeStr = [this.parseTime(dateValue[0], '{y}-{m}'), this.parseTime(dateValue[1], '{y}-{m}')]
          break
      }
      return timeStr
    },
    formatWeek(dateValue) {
      const year = dateValue.getFullYear()
      const weekNumber = this.getISOWeekNumber(dateValue)
      return `${year}-${String(weekNumber).padStart(2, '0')}`
    }
  }
}
</script>

<style lang="scss" scoped>
.date-picker {
  display: flex;
  align-items: center;
}

::v-deep .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0;
  border-right: none;
}

::v-deep .el-input__inner {
  border-radius: 0 4px 4px 0;
}
</style>

日,周,月时间选择器(基于elementUI)-优快云博客
vue中日,周,月,年时间选择器(基于elementui)_vue日历组件 切换月周日都可选择-优快云博客