vue3 - 如何在Vue3和Element Plus中实现周范围选择器功能？

Question

element-plus目前不支持weekrange，找了一圈也没找到案例。这是antd的效果

Answer 1

一个 <el-date-picker />

<template>
 
    <div class="block">
      <el-date-picker
                    v-model="value2"
                    type="week"
                    :format="value2 + ' - ' + value1"
                    placeholder="选择周"
                    @change="changeTime"
                >
                </el-date-picker>
    </div>

</template>

<script lang="ts" setup>
import { ref } from 'vue'

const size = ref<'default' | 'large' | 'small'>('default')

const value1 = ref('')
const value2 = ref('')

const changeTime = (val: any) => {
    const date = new Date(val);
    const y = date.getFullYear();
    const m = date.getMonth();
    const d = date.getDate();
    const week = date.getDay();
    const start = new Date(y, m, d - week + 1);
    const end = new Date(y, m, d - week + 7);

    value2.value = getCurrentTime(start, 0);
    value1.value = getCurrentTime(end, 0);

};
const getCurrentTime = (data: any, num: any) => {
    let date = new Date(data);
    const Y = date.getFullYear();
    const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
    const D = date.getDate() + num < 10 ? '0' + (date.getDate() + num) : date.getDate() + num;
    return Y + '-' + M + '-' + D;
};
</script>

<style scoped>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>

DEMO

Answer 2

可以使用week-range-date-picker

Github仓库

在线预览

我写了一个示例

具体可以详细看那个github仓库地址

安装插件

使用 npm 命令安装 date-picker-week-range 插件：

npm install date-picker-week-range

引入并注册插件

在你的 Vue 项目中，创建并注册插件：

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
import weekRange from 'date-picker-week-range';
import App from './App.vue';

const app = createApp(App);
app.use(ElementPlus);
app.use(weekRange);
app.mount('#app');

在组件中使用插件

在组件中使用 <week-range> 标签来创建一个周范围选择器：

<template>
  <week-range v-model="value" unlink-panels format="YYYY [Week] ww" range-separator="-" start-placeholder="选择开始周" end-placeholder="选择结束周" :shortcuts="shortcuts"></week-range>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const value = ref('');
    const shortcuts = [
      {
        text: '最近一周',
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setDate(start.getDate() - 7);
          return [start, end];
        },
      },
      {
        text: '最近三周',
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setDate(start.getDate() - 21);
          return [start, end];
        },
      },
    ];
    return { value, shortcuts };
  },
};
</script>

<style>
@import 'date-picker-week-range/style.css';
</style>

代码说明

• 安装插件：通过 npm install 命令安装 date-picker-week-range 插件。
• 引入并注册插件：在项目中引入 weekRange 并注册到 Vue 实例中。

• 在组件中使用：

  • 使用 <week-range> 标签创建周范围选择器。
  • 通过 v-model 绑定选择的值。
  • 使用 shortcuts 提供快速选择选项，如“最近一周”和“最近三周”。

Answer 3

哪就自己写个呗根据实际需求！但你这个是啥需求呢，ANTD 的看着也真是丑爆了。
还是根据自己实际需求写校果是最好的

Answer 4

Ele+ 没有 weekrange 这样的范围选择器，如果一定要用 ele+ 来实现的话，就只能自己用两个 <el-date-picker /> 来实现了。

<template>
  <div>
    <div class="demo-date-picker">
      <el-date-picker
        v-model="startWeek"
        type="week" 
        format="[Week] ww"
        placeholder="起始周"
        :disabled-date="disabledEndDate"
        @change="handleStartChange"
      />
      <span class="my-1">~</span>  
      <el-date-picker
        v-model="endWeek"
        ref="endPicker"
        type="week"
        format="[Week] ww"
        placeholder="结束周"
        :disabled-date="disabledStartDate"
      />
    </div>
    <div>
      <span class="my-1">起始周（第一天）: {{ startWeek || '--' }}</span>
      <span class="my-1">结束周（第一天）: {{ endWeek || '--' }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, useTemplateRef } from 'vue'

const startWeek = ref<Date>()
const endWeek = ref<Date>()
const disabledEndDate = (time: Date) => {
  if(!endWeek.value) return false
  return time.getTime() >= endWeek.value.getTime()
}
const disabledStartDate = (time: Date) => {
  if(!startWeek.value) return false
  return time.getTime() < startWeek.value.getTime()
}

import type { DatePickerInstance } from 'element-plus'
const endPickerRef = useTemplateRef<DatePickerInstance>('endPicker')
const handleStartChange = () => {
  endPickerRef.value.handleOpen()
}
</script>

<style scoped>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.my-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
</style>

��在线Demo