BizWeekPicker 周选择

ISO 周选择器（季度选择同族）：年份翻页 + 周格面板（本周边框定位、按当年实际周数渲染 52/53 格）、上周 / 本周 / 下周快捷、v-model 'YYYY-Www' 规范值、change 回抛周起止日期双口径。适用于周报 / 周排班周期选择、周度数据看板筛选、营销周活动配置等场景。

基础用法

选择周

当前值：（未选）

点击触发器弹出年 + 周格面板；触发器附带周起止日期。

<script setup lang="ts">
/** 基础用法：年份翻页 + ISO 周格选择，触发器附带周起止日期 */
import { ref } from 'vue'
import { BizWeekPicker } from 'vue3-ep-biz-lib'

const week = ref('')
</script>

<template>
  <div>
    <BizWeekPicker v-model="week" />
    <p style="margin: 8px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">当前值：{{ week || '（未选）' }}</p>
  </div>
</template>

显示代码

快捷周

选择周

上周 / 本周 / 下周一步到位（面板顶部长按年翻页可跨年）。

<script setup lang="ts">
/** 快捷周：上周 / 本周 / 下周一步到位 */
import { ref } from 'vue'
import { BizWeekPicker } from 'vue3-ep-biz-lib'

const week = ref('')
</script>

<template>
  <BizWeekPicker v-model="week" />
</template>

显示代码

精简回显

2026-W44

show-range=false 触发器只显示周编号；周格悬停仍有起止 title。

<script setup lang="ts">
/** 精简回显：show-range=false 触发器只显示周编号（悬停格子仍有起止 title） */
import { ref } from 'vue'
import { BizWeekPicker } from 'vue3-ep-biz-lib'

const week = ref('2026-W44')
</script>

<template>
  <BizWeekPicker v-model="week" :show-range="false" />
</template>

显示代码

预设回显

2026-W44 · 10/26~11/01

v-model 带 '2026-W44' 初始值，面板自动定位年份。

<script setup lang="ts">
/** 预设回显：v-model 带 'YYYY-Www' 初始值，面板自动定位到该年 */
import { ref } from 'vue'
import { BizWeekPicker } from 'vue3-ep-biz-lib'

const week = ref('2026-W44')
</script>

<template>
  <BizWeekPicker v-model="week" />
</template>

显示代码

change 载荷

选择周

change 回抛 { week, start, end }，start / end 可直接用于接口查询区间。

<script setup lang="ts">
/** change 载荷：week 规范值 + start / end 周起止日期一并外抛 */
import { ref } from 'vue'
import { BizWeekPicker } from 'vue3-ep-biz-lib'
import type { BizWeekValue } from 'vue3-ep-biz-lib'

const week = ref('')
const picked = ref<BizWeekValue | null>(null)
</script>

<template>
  <div>
    <BizWeekPicker v-model="week" @change="(v) => (picked = v)" />
    <p v-if="picked" style="margin: 8px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      week={{ picked.week }} · start={{ picked.start }} · end={{ picked.end }}
    </p>
  </div>
</template>

显示代码

禁用与不可清空

2026-W44 · 10/26~11/01

2026-W44 · 10/26~11/01

禁用置灰不可弹面板；clearable=false 隐藏清空图标。

<script setup lang="ts">
/** 禁用与不可清空 */
import { BizWeekPicker } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="display: flex; gap: 12px; flex-wrap: wrap">
    <BizWeekPicker model-value="2026-W44" disabled />
    <BizWeekPicker model-value="2026-W44" :clearable="false" />
  </div>
</template>

显示代码

关闭快捷项

选择周

面板只保留年份导航与周格。

<script setup lang="ts">
/** 关闭快捷项：面板只保留年份导航与周格 */
import { ref } from 'vue'
import { BizWeekPicker } from 'vue3-ep-biz-lib'

const week = ref('')
</script>

<template>
  <BizWeekPicker v-model="week" :shortcuts="false" />
</template>

显示代码

清空交互

2026-W44 · 10/26~11/01

当前值：2026-W44

悬停触发器出现清空图标，一键回到未选态（v-model 置空串）。

<script setup lang="ts">
/** 清空交互：悬停触发器出现清空图标，一键回到未选态 */
import { ref } from 'vue'
import { BizWeekPicker } from 'vue3-ep-biz-lib'

const week = ref('2026-W44')
</script>

<template>
  <div>
    <BizWeekPicker v-model="week" />
    <p style="margin: 8px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">当前值：{{ week || '（未选）' }}</p>
  </div>
</template>

显示代码

53 周年份

2026-W53 · 12/28~01/03

ISO 规范下部分年份有 53 周（如 2026），面板按实际周数渲染。

<script setup lang="ts">
/** 跨年与 53 周年份：面板按 ISO 规范渲染当年实际周数（如 2026 年 53 周） */
import { ref } from 'vue'
import { BizWeekPicker } from 'vue3-ep-biz-lib'

const week = ref('2026-W53')
</script>

<template>
  <BizWeekPicker v-model="week" />
</template>

显示代码

周报场景

选择周

选周驱动标题区间与该周汇总（start / end 直接可用）。

<script setup lang="ts">
/** 周报场景：选周驱动标题区间与该周汇总（change 的 start / end 直接可用） */
import { ref } from 'vue'
import { ElTag } from 'element-plus'
import { BizWeekPicker } from 'vue3-ep-biz-lib'
import type { BizWeekValue } from 'vue3-ep-biz-lib'

const week = ref('')
const range = ref<BizWeekValue | null>(null)
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 8px; align-items: flex-start">
    <BizWeekPicker v-model="week" @change="(v) => (range = v)" />
    <p v-if="range" style="margin: 0; font-size: 13px">
      <ElTag size="small" effect="plain">{{ range.week }}</ElTag>
      周报区间 {{ range.start }} ~ {{ range.end }} · 本周新访客 1,284 · 转化率 3.2%
    </p>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
v-model	string	''	选中周 'YYYY-Www'（如 '2026-W44'）；空串为未选
placeholder	string	'选择周'	占位提示
shortcuts	boolean	true	上周 / 本周 / 下周快捷项
show-range	boolean	true	触发器附带周起止日期
clearable	boolean	true	可清空
disabled	boolean	false	禁用

Events

事件名	参数	说明
change	(value: BizWeekValue)	选中周：{ week: 'YYYY-Www', start: 周一, end: 周日 }（YYYY-MM-DD）

Expose

属性/方法	说明
setWeek	(year: number, week: number) => void 编程设值（同面板选择语义）

口径说明

• ISO 8601 周：周一为一周之始，1 月 4 日恒属第 1 周，周四决定周的归属年（跨年周如「2026-W1」可能落在上一年 12 月）；年周数由 12 月 28 日所在周推导（52 或 53）。
• 周区间：start 为该周周一、end 为周日，均按本地时区计算。