日期选择器
用于选择或输入日期（经典版，范围默认双面板）。推荐新项目使用 DatePicker Pro。
组件选型
| 组件 | 说明 |
|---|---|
| DatePicker（本文档） | 经典日期选择器 |
| DatePicker Pro | Pro 单面板范围 |
| DateTimePicker | 日期 + 时刻 |
| TimePicker | 仅时刻 |
| DatePickerPanel | 独立面板 |
单点选择
日期 date
type="date"；shortcuts、disabledDate。
默认
带快捷选项
🎉 点击尾部
🎉 轻量化
禁用
禁用
vue
<template>
<w-radio-group v-model="size" aria-label="size control">
<w-radio-button value="large">large</w-radio-button>
<w-radio-button value="default">default</w-radio-button>
<w-radio-button value="small">small</w-radio-button>
<w-radio-button value="mini">mini</w-radio-button>
</w-radio-group>
<div class="flex flex-wrap gap-4">
<div class="block">
<span class="demonstration">默认</span>
<w-date-picker
v-model="value1"
type="date"
placeholder="请选择日期"
:size="size"
/>
</div>
<div class="block">
<span class="demonstration">带快捷选项</span>
<w-date-picker
v-model="value2"
type="date"
placeholder="请选择日期"
:disabled-date="disabledDate"
:shortcuts="shortcuts"
:size="size"
/>
</div>
<div class="block">
<span class="demonstration">🎉 点击尾部</span>
<w-date-picker
v-model="value3"
type="date"
placeholder="请选择日期"
trigger-suffix
:size="size"
/>
</div>
<div class="block">
<span class="demonstration">🎉 轻量化</span>
<w-date-picker
v-model="value3"
type="date"
placeholder="请选择日期"
plain
:size="size"
/>
</div>
<div class="block">
<span class="demonstration">禁用</span>
<w-date-picker
v-model="value3"
disabled
type="date"
placeholder="请选择日期"
:size="size"
/>
</div>
<div class="block">
<span class="demonstration">禁用</span>
<w-date-picker
v-model="value1"
disabled
type="date"
placeholder="请选择日期"
:size="size"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const size = ref<'default' | 'large' | 'small'>('default')
const value1 = ref('')
const value2 = ref('')
const value3 = ref('2025-07-21')
const shortcuts = [
{
text: '今天',
value: new Date(),
},
{
text: '昨天',
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24)
return date
},
},
{
text: '一周前',
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
return date
},
},
]
const disabledDate = (time: Date) => {
return time.getTime() > Date.now()
}
</script>
<style scoped>
.block {
padding-top: 20px;
text-align: center;
}
.demonstration {
display: block;
color: var(--w3-font-color-second);
font-size: 14px;
margin-bottom: 16px;
}
</style>隐藏源代码
禁用日期 disabled-date
通过 disabled-date 函数控制哪些日期不可选，函数接收 Date 参数，返回 true 表示禁用。
禁用今天之后的日期
禁用今天之前的日期
禁用周末
vue
<template>
<div class="flex flex-wrap gap-4">
<div class="block">
<span class="demonstration">禁用今天之后的日期</span>
<w-date-picker
v-model="value1"
type="date"
placeholder="请选择日期"
:disabled-date="disabledDateAfter"
/>
</div>
<div class="block">
<span class="demonstration">禁用今天之前的日期</span>
<w-date-picker
v-model="value2"
type="date"
placeholder="请选择日期"
:disabled-date="disabledDateBefore"
/>
</div>
<div class="block">
<span class="demonstration">禁用周末</span>
<w-date-picker
v-model="value3"
type="date"
placeholder="请选择日期"
:disabled-date="disabledWeekend"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const disabledDateAfter = (time: Date) => {
return time.getTime() > Date.now()
}
const disabledDateBefore = (time: Date) => {
return time.getTime() < Date.now() - 86400000
}
const disabledWeekend = (time: Date) => {
const day = time.getDay()
return day === 0 || day === 6
}
</script>
<style scoped>
.block {
padding-top: 20px;
text-align: center;
}
.demonstration {
display: block;
color: var(--w3-font-color-second);
font-size: 14px;
margin-bottom: 16px;
}
</style>隐藏源代码
周、月、年、多个日期
周
多个日期
年
多个年
月
多个月
vue
<template>
<div class="demo-date-picker">
<div class="container">
<div class="block">
<span class="demonstration">周</span>
<w-date-picker
v-model="value1"
type="week"
format="ww [周]"
placeholder="选择周"
/>
</div>
<div class="block">
<span class="demonstration">多个日期</span>
<w-date-picker
v-model="value2"
type="dates"
placeholder="选择多个日期"
/>
</div>
</div>
<div class="container">
<div class="block">
<span class="demonstration">年</span>
<w-date-picker v-model="value3" type="year" placeholder="选择年" />
</div>
<div class="block">
<span class="demonstration">多个年</span>
<w-date-picker v-model="value4" type="years" placeholder="选择多个年" />
</div>
</div>
<div class="container">
<div class="block">
<span class="demonstration">月</span>
<w-date-picker v-model="value5" type="month" placeholder="选择月" />
</div>
<div class="block">
<span class="demonstration">多个月</span>
<w-date-picker
v-model="value6"
type="months"
placeholder="选择多个月"
/>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const value4 = ref('')
const value5 = ref('')
const value6 = ref('')
</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;
flex: 1;
}
.demo-date-picker .container {
flex: 1;
}
.demo-date-picker .demonstration {
display: block;
color: var(--w3-font-color-third);
font-size: 14px;
margin-bottom: 16px;
}
</style>隐藏源代码
范围选择
默认左右双面板联动，unlink-panels 可解除联动。
日期范围 daterange
默认
-
快捷选项
-
🎉 轻量化
-
vue
<template>
<w-radio-group v-model="size" aria-label="size control">
<w-radio-button value="large">large</w-radio-button>
<w-radio-button value="default">default</w-radio-button>
<w-radio-button value="small">small</w-radio-button>
<w-radio-button value="mini">mini</w-radio-button>
</w-radio-group>
<w-space class="flex">
<div class="block">
<span class="demonstration">默认</span>
<w-date-picker
v-model="value1"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:size="size"
/>
</div>
<div class="block">
<span class="demonstration">快捷选项</span>
<w-date-picker
v-model="value2"
type="daterange"
unlink-panels
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:shortcuts="shortcuts"
:size="size"
/>
</div>
</w-space>
<w-space class="flex">
<div class="block">
<span class="demonstration">🎉 轻量化</span>
<w-date-picker
v-model="value3"
plain
type="daterange"
unlink-panels
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:shortcuts="shortcuts"
:size="size"
/>
</div>
</w-space>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const size = ref<'default' | 'large' | 'small'>('default')
const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const shortcuts = [
{
text: '最近一周',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
return [start, end]
},
},
{
text: '最近一个月',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start, end]
},
},
{
text: '最近三个月',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
return [start, end]
},
},
]
</script>
<style scoped>
.block {
padding-top: 20px;
text-align: center;
flex: 1;
}
.demonstration {
display: block;
color: var(--w3-font-color-second);
font-size: 14px;
margin-bottom: 16px;
}
</style>隐藏源代码
月份范围 monthrange
默认
-
快捷选项
-
vue
<template>
<div class="demo-date-picker">
<div class="block">
<span class="demonstration">默认</span>
<w-date-picker
v-model="value1"
type="monthrange"
range-separator="-"
start-placeholder="开始月份"
end-placeholder="结束月份"
/>
</div>
<div class="block">
<span class="demonstration">快捷选项</span>
<w-date-picker
v-model="value2"
type="monthrange"
unlink-panels
range-separator="-"
start-placeholder="开始月份"
end-placeholder="结束月份"
:shortcuts="shortcuts"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value1 = ref('')
const value2 = ref('')
const shortcuts = [
{
text: '最近一个月',
value: [new Date(), new Date()],
},
{
text: '最近一年',
value: () => {
const end = new Date()
const start = new Date(new Date().getFullYear(), 0)
return [start, end]
},
},
{
text: '最近六个月',
value: () => {
const end = new Date()
const start = new Date()
start.setMonth(start.getMonth() - 6)
return [start, end]
},
},
]
</script>
<style scoped>
.demo-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding-top: 20px;
text-align: center;
flex: 1;
}
.demo-date-picker .demonstration {
display: block;
color: var(--w3-font-color-second);
font-size: 14px;
margin-bottom: 16px;
}
</style>隐藏源代码
年份范围 yearrange
默认
-
快捷选项
-
vue
<template>
<div class="demo-date-picker">
<div class="block">
<span class="demonstration">默认</span>
<w-date-picker
v-model="value1"
type="yearrange"
range-separator="-"
start-placeholder="开始年份"
end-placeholder="结束年份"
/>
</div>
<div class="block">
<span class="demonstration">快捷选项</span>
<w-date-picker
v-model="value2"
type="yearrange"
unlink-panels
range-separator="-"
start-placeholder="开始年份"
end-placeholder="结束年份"
:shortcuts="shortcuts"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value1 = ref()
const value2 = ref()
const shortcuts = [
{
text: '近一年',
value: [new Date(), new Date()],
},
{
text: '近十年',
value: () => {
const end = new Date()
const start = new Date(
new Date().setFullYear(new Date().getFullYear() - 10)
)
return [start, end]
},
},
{
text: '近50年',
value: () => {
const start = new Date()
const end = new Date(
new Date().setFullYear(new Date().getFullYear() + 50)
)
return [start, end]
},
},
]
</script>
<style scoped>
.demo-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding-top: 20px;
text-align: center;
flex: 1;
}
.demo-date-picker .demonstration {
display: block;
color: var(--w3-font-color-second);
font-size: 14px;
margin-bottom: 16px;
}
</style>隐藏源代码
格式与绑定值
显示格式与 value-format
使用 format 指定输入框格式，value-format 指定绑定值格式；默认为 Date 对象。
| 格式 | 输出 | 描述 |
|---|---|---|
YY | 18 | 两位数的年份 |
YYYY | 2018 | 四位数的年份 |
M | 1-12 | 月份，从 1 开始 |
MM | 01-12 | 月份，两位数 |
MMM | Jan-Dec | 简写的月份名称 |
MMMM | January-December | 完整的月份名称 |
D | 1-31 | 月份里的一天 |
DD | 01-31 | 月份里的一天，两位数 |
d | 0-6 | 一周中的一天，星期天是 0 |
dd | Su-Sa | 最简写的一周中一天的名称 |
ddd | Sun-Sat | 简写的一周中一天的名称 |
dddd | Sunday-Saturday | 一周中一天的名称 |
H | 0-23 | 小时 |
HH | 00-23 | 小时，两位数 |
h | 1-12 | 小时, 12 小时制 |
hh | 01-12 | Hours, 12 小时制, 两位数 |
m | 0-59 | 分钟 |
mm | 00-59 | 分钟，两位数 |
s | 0-59 | 秒 |
ss | 00-59 | 秒 两位数 |
SSS | 000-999 | 毫秒 三位数 |
Z | +5:00 | UTC 的偏移量 |
ZZ | +0500 | UTC 的偏移量，数字前面加上 0 |
A | AM PM | |
a | am pm |
WARNING
请一定要注意传入参数的大小写是否正确
Date object
value-format
Timestamp
vue
<template>
<div class="demo-date-picker">
<div class="block">
<span class="demonstration">Date object</span>
<div class="demonstration">{{ value1 }}</div>
<w-date-picker
v-model="value1"
type="date"
placeholder="请选择日期"
format="YYYY/MM/DD"
/>
</div>
<div class="block">
<span class="demonstration">value-format</span>
<div class="demonstration">{{ value2 }}</div>
<w-date-picker
v-model="value2"
type="date"
placeholder="请选择日期"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
/>
</div>
<div class="block">
<span class="demonstration">Timestamp</span>
<div class="demonstration">{{ value3 }}</div>
<w-date-picker
v-model="value3"
type="date"
placeholder="请选择日期"
format="YYYY/MM/DD"
value-format="x"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
</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;
flex: 1;
}
.demo-date-picker .demonstration {
display: block;
color: var(--w3-font-color-second);
font-size: 14px;
margin-bottom: 16px;
}
</style>隐藏源代码
change 附带格式化字符串 emit-formatted-value
开启后，change 事件的第二个参数为格式化字符串；v-model 仍为 Date 或 Date[]（未设置 value-format 时）。
日期选择器
周选择器
时间选择器
范围选择器
-
vue
<template>
<w-space class="flex mb-8">
<div class="block">
<span class="demonstration">日期选择器</span>
<w-date-picker
v-model="value1"
type="date"
format="YYYY-MM-DD"
emit-formatted-value
placeholder="请选择日期"
@change="handleCurrentChange1"
/>
</div>
<div class="block">
<span class="demonstration">周选择器</span>
<w-date-picker
v-model="value2"
type="week"
format="ww [周]"
emit-formatted-value
placeholder="请选择周"
@change="handleCurrentChange2"
/>
</div>
<div class="block">
<span class="demonstration">时间选择器</span>
<w-time-picker
v-model="value3"
emit-formatted-value
format="HH:mm:ss"
placeholder="请选择时间"
@change="handleCurrentChange3"
/>
</div>
</w-space>
<w-space class="flex">
<div class="block">
<span class="demonstration">范围选择器</span>
<w-date-picker
v-model="value4"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
emit-formatted-value
format="YYYY/MM/DD"
@change="handleCurrentChange4"
/>
</div>
</w-space>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const value4 = ref(['2025-07-01', '2025-08-30'])
watch(value4, (val, oldVal) => {
console.log('数据变化：', val, oldVal)
})
const handleCurrentChange1 = (val: Date, format: string) => {
console.log(`current date: ${val}, format: ${format}`)
}
const handleCurrentChange2 = (val: Date, format: string) => {
console.log(`current date: ${val}, format: ${format}`)
}
const handleCurrentChange3 = (val: Date, format: string) => {
console.log(`current date: ${val}, format: ${format}`)
}
const handleCurrentChange4 = (val: Date, format: string) => {
console.log(`current date: ${val}, format: ${format}`)
}
</script>
<style scoped>
.block {
padding-top: 20px;
text-align: center;
}
.demonstration {
display: block;
color: var(--w3-font-color-second);
font-size: 14px;
margin-bottom: 16px;
}
</style>隐藏源代码
打开时的默认日期 default-value
设置默认值
日期范围
-
vue
<template>
<div class="demo-date-picker">
<div class="block">
<span class="demonstration">设置默认值</span>
<w-date-picker
v-model="value1"
type="date"
placeholder="请选择日期"
:default-value="new Date(2023, 7, 1)"
/>
</div>
<div class="block">
<span class="demonstration">日期范围</span>
<w-date-picker
v-model="value2"
type="daterange"
start-placeholder="请选择开始日期"
end-placeholder="请选择结束日期"
:default-value="[new Date(2023, 7, 1), new Date(2023, 10, 1)]"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value1 = ref('')
const value2 = ref('')
</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;
flex: 1;
}
.demo-date-picker .demonstration {
display: block;
color: var(--w3-font-color-second);
font-size: 14px;
margin-bottom: 16px;
}
</style>隐藏源代码
范围选中日期的默认时刻 default-time
-
vue
<template>
<div class="demo-date-picker">
<div class="block">
<p>{{ value }}</p>
<w-date-picker
v-model="value"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="defaultTime"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref('')
const defaultTime = ref<[Date, Date]>([
new Date(2000, 1, 1, 0, 0, 0),
new Date(2000, 2, 1, 23, 59, 59),
])
</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;
flex: 1;
}
</style>隐藏源代码
自定义
前缀 / 后缀图标
后缀默认显示日历图标；前缀仅在有 prefix-icon 时显示。详见 DatePicker Pro。
set suffix-icon
pre
set suffix-icon
pre
-vue
<template>
<div class="demo-date-picker">
<div class="block">
<span class="demonstration">set suffix-icon</span>
<w-date-picker
v-model="value1"
type="date"
placeholder="请选择日期"
:prefix-icon="customPrefix"
:suffix-icon="Search"
/>
</div>
<div class="block">
<span class="demonstration">set suffix-icon</span>
<w-date-picker
v-model="value2"
type="daterange"
:suffix-icon="Search"
:prefix-icon="customPrefix"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { h, ref, shallowRef } from 'vue'
import { Search } from '@win-design-next/icons-vue'
const value1 = ref('')
const value2 = ref('')
const customPrefix = shallowRef({
render() {
return h('p', 'pre')
},
})
</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;
flex: 1;
}
.demo-date-picker .demonstration {
display: block;
color: var(--w3-font-color-second);
font-size: 14px;
margin-bottom: 16px;
}
</style>隐藏源代码
单元格内容
vue
<template>
<div class="demo-date-picker">
<w-date-picker
v-model="value"
type="date"
placeholder="请选择日期"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
>
<template #default="cell">
<div class="cell" :class="{ current: cell.isCurrent }">
<span class="text">{{ cell.text }}</span>
<span v-if="isHoliday(cell)" class="holiday" />
</div>
</template>
</w-date-picker>
<w-date-picker v-model="month" type="month" placeholder="请选择月份">
<template #default="cell">
<div class="w3-date-table-cell" :class="{ current: cell.isCurrent }">
<span class="w3-date-table-cell__text">{{ cell.text + 1 }}期</span>
</div>
</template>
</w-date-picker>
<w-date-picker v-model="year" type="year" placeholder="请选择年份">
<template #default="cell">
<div class="w3-date-table-cell" :class="{ current: cell.isCurrent }">
<span class="w3-date-table-cell__text">{{ cell.text + 1 }}y</span>
</div>
</template>
</w-date-picker>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref('2021-10-29')
const month = ref('')
const year = ref('')
const holidays = [
'2021-10-01',
'2021-10-02',
'2021-10-03',
'2021-10-04',
'2021-10-05',
'2021-10-06',
'2021-10-07',
]
const isHoliday = ({ dayjs }) => {
return holidays.includes(dayjs.format('YYYY-MM-DD'))
}
</script>
<style scoped>
.demo-date-picker {
display: flex;
justify-content: space-between;
}
.cell {
height: 30px;
padding: 3px 0;
box-sizing: border-box;
}
.cell .text {
width: 24px;
height: 24px;
display: block;
margin: 0 auto;
line-height: 24px;
position: absolute;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
}
.cell.current .text {
background: #626aef;
color: #fff;
}
.cell .holiday {
position: absolute;
width: 6px;
height: 6px;
background: var(--w3-color-danger);
border-radius: 50%;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
</style>隐藏源代码
前缀/清除图标插槽
日期选择器
日期范围选择器
-
月份范围选择器
-
年份范围选择器
-
vue
<template>
<div class="demo-date-picker-icon">
<div class="container">
<div class="block">
<div class="demonstration">日期选择器</div>
<w-date-picker
v-model="value1"
type="date"
placeholder="请选择日期"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
>
<template #prev-month>
<w-icon><CaretLeft /></w-icon>
</template>
<template #next-month>
<w-icon><CaretRight /></w-icon>
</template>
<template #prev-year>
<w-icon>
<svg
viewBox="0 0 20 20"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
/>
</g>
</g>
</svg>
</w-icon>
</template>
<template #next-year>
<w-icon>
<svg
viewBox="0 0 20 20"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
/>
</g>
</g>
</svg>
</w-icon>
</template>
</w-date-picker>
</div>
<div class="line" />
<div class="block">
<div class="demonstration">日期范围选择器</div>
<w-date-picker
v-model="value2"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
unlink-panels
>
<template #prev-month>
<w-icon><CaretLeft /></w-icon>
</template>
<template #next-month>
<w-icon><CaretRight /></w-icon>
</template>
<template #prev-year>
<w-icon>
<svg
viewBox="0 0 20 20"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
/>
</g>
</g>
</svg>
</w-icon>
</template>
<template #next-year>
<w-icon>
<svg
viewBox="0 0 20 20"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
/>
</g>
</g>
</svg>
</w-icon>
</template>
</w-date-picker>
</div>
</div>
<div class="container">
<div class="line" />
<div class="block">
<div class="demonstration">月份范围选择器</div>
<w-date-picker
v-model="value3"
type="monthrange"
start-placeholder="开始月份"
end-placeholder="结束月份"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
unlink-panels
>
<template #prev-month>
<w-icon><CaretLeft /></w-icon>
</template>
<template #next-month>
<w-icon><CaretRight /></w-icon>
</template>
<template #prev-year>
<w-icon>
<svg
viewBox="0 0 20 20"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
/>
</g>
</g>
</svg>
</w-icon>
</template>
<template #next-year>
<w-icon>
<svg
viewBox="0 0 20 20"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
/>
</g>
</g>
</svg>
</w-icon>
</template>
</w-date-picker>
</div>
<div class="line" />
<div class="block">
<div class="demonstration">年份范围选择器</div>
<w-date-picker
v-model="value4"
type="yearrange"
range-separator="-"
start-placeholder="开始年份"
end-placeholder="结束年份"
>
<template #prev-year>
<w-icon>
<svg
viewBox="0 0 20 20"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
/>
</g>
</g>
</svg>
</w-icon>
</template>
<template #next-year>
<w-icon>
<svg
viewBox="0 0 20 20"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
/>
</g>
</g>
</svg>
</w-icon>
</template>
</w-date-picker>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { CaretLeft, CaretRight } from '@win-design-next/icons-vue'
const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const value4 = ref('')
</script>
<style scoped>
.demo-date-picker-icon {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker-icon .block {
padding: 30px 0;
text-align: center;
flex: 1;
}
.demo-date-picker-icon .container {
flex: 1;
}
.demo-date-picker-icon .demonstration {
display: block;
color: var(--w3-font-color-second);
font-size: 14px;
margin-bottom: 16px;
}
</style>隐藏源代码
ts
interface DateCell {
column: number
customClass: string
disabled: boolean
end: boolean
inRange: boolean
row: number
selected: Dayjs
isCurrent: boolean
isSelected: boolean
start: boolean
text: number
timestamp: number
date: Date
dayjs: Dayjs
type: 'normal' | 'today' | 'week' | 'next-month' | 'prev-month'
}国际化
由于 WinDesign Next 的默认语言为中文，如果你需要设置其它的语言，请参考国际化文档。
要注意的是：日期相关的文字（月份，每一周的第一天等等）也都是通过国际化来配置的。
API
属性
| 参数 | 说明 | 类型 | 默认值 | Version |
|---|---|---|---|---|
| model-value / v-model | 绑定值，如果它是数组，长度应该是 2 | number / string / Date / array | '' | |
| readonly | 只读 | boolean | false | |
| disabled | 禁用 | boolean | false | |
| size | 输入框尺寸 | enum | — | |
| editable | 文本框可输入 | boolean | true | |
| clearable | 是否显示清除按钮 | boolean | true | |
| placeholder | 非范围选择时的占位内容 | string | '' | |
| start-placeholder | 范围选择时开始日期的占位内容 | string | — | |
| end-placeholder | 范围选择时结束日期的占位内容 | string | — | |
| type | 显示类型 | enum | date | |
| format | 显示在输入框中的格式 | 参见 date formats | YYYY-MM-DD | |
| popper-class | DatePicker 下拉框的类名 | string | — | |
| popper-options | 自定义 popper 选项，更多请参考 popper.js | object | {} | |
| teleported | 是否使用 teleport；为 true 时下拉层挂载到 append-to 指定位置 | boolean | true | |
| append-to | 下拉层挂载到哪个 DOM 元素 | string | — | |
| range-separator | 选择范围时的分隔符 | string | '-' | |
| default-value | 可选，选择器打开时默认显示的时间 | object | — | |
| default-time | 范围选择时选中日期所使用的当日内具体时刻 | object | — | |
| value-format | 可选，绑定值的格式。 不指定则绑定值为 Date 对象 | 参见 格式与绑定值 | — | |
| id | 等价于原生 input id 属性 | string / object | — | |
| name | 等价于原生 input name 属性 | string / object | '' | |
| unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean | false | |
| prefix-icon | 自定义前缀图标；未设置时不显示 | string / object | '' | |
| suffix-icon | 自定义后缀图标；未设置时默认为日历/时钟图标 | string / object | '' | |
| clear-icon | 自定义清除图标 | string / object | CircleCloseFilled | |
| validate-event | 是否触发表单验证 | boolean | true | |
| disabled-date | 一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。 | Function | — | |
| shortcuts | 设置快捷选项，需要传入数组对象 | object | [] | |
| cell-class-name | 设置自定义类名 | Function | — | |
| empty-values | 组件的空值配置 参考 config-provider | array | — | |
| value-on-clear | 清空选项的值 参考 config-provider | string / number / boolean / Function | — | |
| fallback-placements | Tooltip 可用的 positions 请查看popper.js 文档 | array | ['bottom','top','right','left'] | |
| placement | 下拉框出现的位置 | Placement | bottom-start | |
| trigger-suffix | 点击后缀图标触发下拉框 | boolean | false | V0.0.8 |
| plain | 朴素的 DatePicker | boolean | false | V0.0.8 |
| emit-formatted-value | change 事件是否附带格式化字符串（第二参数） | boolean | false | V0.0.8 |
事件
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 用户确认选定的值时触发 | Function |
| blur | 在组件 Input 失去焦点时触发 | Function |
| focus | 在组件 Input 获得焦点时触发 | Function |
| clear | 可清空的模式下用户点击清空按钮时触发 | Function |
| calendar-change | 在日历所选日期更改时触发 | Function |
| panel-change | 当日期面板改变时触发。 | Function |
| visible-change | 当 DatePicker 的下拉列表出现/消失时触发 | Function |
插槽
| 名称 | 说明 |
|---|---|
| default | 自定义单元格内容 |
| range-separator | 自定义范围分割符内容 |
暴露
| 插槽名 | 说明 | 类型 |
|---|---|---|
| focus | 使组件获取焦点 | Function |
| blur | 使组件失去焦点 | Function |
| handleOpen | 打开日期选择器弹窗 | Function |
| handleClose | 关闭日期选择器弹窗 | Function |
类型声明
显示类型声明
ts
import type { Options as PopperOptions } from '@popperjs/core'
type TimeLikeType = 'datetime' | 'datetimerange'
type Placement =
| 'top'
| 'top-start'
| 'top-end'
| 'bottom'
| 'bottom-start'
| 'bottom-end'
| 'left'
| 'left-start'
| 'left-end'
| 'right'
| 'right-start'
| 'right-end'Copyright 2025 Winning Health 版权所有