DatePicker 日期选择器
用于选择或输入日期
选择某一天
以”日“为基本单位，基础的日期选择控件
基本单位由 type 属性指定。 通过 shortcuts 配置快捷选项， 通过 disabledDate 函数，来设置禁用掉的日期。
Default
Picker with quick options
vue
<template>
<el-radio-group v-model="size" aria-label="size control" class="mb-4">
<el-radio-button value="large">large</el-radio-button>
<el-radio-button value="default">default</el-radio-button>
<el-radio-button value="small">small</el-radio-button>
</el-radio-group>
<div class="demo-date-picker">
<div class="block">
<span class="demonstration">Default</span>
<el-date-picker
v-model="value1"
type="date"
placeholder="Pick a day"
:size="size"
/>
</div>
<div class="block">
<span class="demonstration">Picker with quick options</span>
<el-date-picker
v-model="value2"
type="date"
placeholder="Pick a day"
:disabled-date="disabledDate"
:shortcuts="shortcuts"
: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 shortcuts = [
{
text: 'Today',
value: new Date(),
},
{
text: 'Yesterday',
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24)
return date
},
},
{
text: 'A week ago',
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>
.demo-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 1.5rem 0;
text-align: center;
border-right: solid 1px var(--elp-border-color);
flex: 1;
min-width: 300px;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--elp-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
}
@media screen and (max-width: 768px) {
.demo-date-picker .block {
flex: 0 0 100%;
padding: 1rem 0;
min-width: auto;
border-right: none;
border-bottom: solid 1px var(--elp-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>隐藏源代码
其他日期单位
通过扩展基础的日期选择，可以选择周、月、年或多个日期
Week
Dates
Year
Years
Month
Months
vue
<template>
<div class="demo-date-picker">
<div class="container">
<div class="block">
<span class="demonstration">Week</span>
<el-date-picker
v-model="value1"
type="week"
format="[Week] ww"
placeholder="Pick a week"
/>
</div>
<div class="block">
<span class="demonstration">Dates</span>
<el-date-picker
v-model="value2"
type="dates"
placeholder="Pick one or more dates"
/>
</div>
</div>
<div class="container">
<div class="block">
<span class="demonstration">Year</span>
<el-date-picker
v-model="value3"
type="year"
placeholder="Pick a year"
/>
</div>
<div class="block">
<span class="demonstration">Years</span>
<el-date-picker
v-model="value4"
type="years"
placeholder="Pick one or more years"
/>
</div>
</div>
<div class="container">
<div class="block">
<span class="demonstration">Month</span>
<el-date-picker
v-model="value5"
type="month"
placeholder="Pick a month"
/>
</div>
<div class="block">
<span class="demonstration">Months</span>
<el-date-picker
v-model="value6"
type="months"
placeholder="Pick one or more months"
/>
</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 .container {
flex: 1;
min-width: 300px;
border-right: solid 1px var(--elp-border-color);
}
.demo-date-picker .container:last-child {
border-right: none;
}
.demo-date-picker .block {
padding: 1.5rem 0;
text-align: center;
}
.demo-date-picker .container .block:last-child {
border-top: solid 1px var(--elp-border-color);
}
.demo-date-picker .demonstration {
display: block;
color: var(--elp-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
}
@media screen and (max-width: 768px) {
.demo-date-picker .container {
flex: 0 0 100%;
min-width: auto;
border-right: none;
border-bottom: solid 1px var(--elp-border-color);
}
.demo-date-picker .container:last-child {
border-bottom: none;
}
.demo-date-picker .block {
padding: 1rem 0;
}
.demo-date-picker .container .block:last-child {
border-top: solid 1px var(--elp-border-color);
}
}
</style>隐藏源代码
选择一段时间
你可以通过如下例子来学习如何设置一个日期范围选择器。
在选择日期范围时，默认情况下左右面板会联动。 如果希望两个面板各自独立切换当前月份，可以使用 unlink-panels 属性解除联动。
Default
To
With quick options
To
vue
<template>
<el-radio-group v-model="size" aria-label="size control" class="mb-4">
<el-radio-button value="large">large</el-radio-button>
<el-radio-button value="default">default</el-radio-button>
<el-radio-button value="small">small</el-radio-button>
</el-radio-group>
<div class="demo-date-picker">
<div class="block">
<span class="demonstration">Default</span>
<el-date-picker
v-model="value1"
type="daterange"
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
:size="size"
/>
</div>
<div class="block">
<span class="demonstration">With quick options</span>
<el-date-picker
v-model="value2"
type="daterange"
unlink-panels
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
:shortcuts="shortcuts"
: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 shortcuts = [
{
text: 'Last week',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
return [start, end]
},
},
{
text: 'Last month',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start, end]
},
},
{
text: 'Last 3 months',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
return [start, end]
},
},
]
</script>
<style scoped>
.demo-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 1.5rem 0;
text-align: center;
border-right: solid 1px var(--elp-border-color);
flex: 1;
min-width: 400px;
display: flex;
flex-direction: column;
align-items: center;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--elp-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
}
@media screen and (max-width: 1200px) {
.demo-date-picker .block {
flex: 0 0 100%;
padding: 1rem 0;
min-width: auto;
border-right: none;
border-bottom: solid 1px var(--elp-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>隐藏源代码
选择月份范围
你当然还可以选择一个月的范围。
在选择月份范围时，默认情况下左右面板会联动。 如果希望两个面板各自独立切换当前年份，可以使用 unlink-panels 属性解除联动。
Default
To
With quick options
To
vue
<template>
<div class="demo-date-picker">
<div class="block">
<span class="demonstration">Default</span>
<el-date-picker
v-model="value1"
type="monthrange"
range-separator="To"
start-placeholder="Start month"
end-placeholder="End month"
/>
</div>
<div class="block">
<span class="demonstration">With quick options</span>
<el-date-picker
v-model="value2"
type="monthrange"
unlink-panels
range-separator="To"
start-placeholder="Start month"
end-placeholder="End month"
:shortcuts="shortcuts"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value1 = ref('')
const value2 = ref('')
const shortcuts = [
{
text: 'This month',
value: [new Date(), new Date()],
},
{
text: 'This year',
value: () => {
const end = new Date()
const start = new Date(new Date().getFullYear(), 0)
return [start, end]
},
},
{
text: 'Last 6 months',
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: 1.5rem 0;
text-align: center;
border-right: solid 1px var(--elp-border-color);
flex: 1;
min-width: 300px;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--elp-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
}
@media screen and (max-width: 768px) {
.demo-date-picker .block {
flex: 0 0 100%;
padding: 1rem 0;
min-width: auto;
border-right: none;
border-bottom: solid 1px var(--elp-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>隐藏源代码
年份范围2.8.0
你可以通过如下例子来学习如何设置一个年份范围选择器。
在选择范围时，默认情况下左右面板会联动。 如果希望两个面板各自独立切换当前年份，可以使用 unlink-panels 属性解除联动。
Default
To
With quick options
To
vue
<template>
<div class="demo-date-picker">
<div class="block">
<span class="demonstration">Default</span>
<el-date-picker
v-model="value1"
type="yearrange"
range-separator="To"
start-placeholder="Start Year"
end-placeholder="End Year"
/>
</div>
<div class="block">
<span class="demonstration">With quick options</span>
<el-date-picker
v-model="value2"
type="yearrange"
unlink-panels
range-separator="To"
start-placeholder="Start Year"
end-placeholder="End Year"
:shortcuts="shortcuts"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value1 = ref()
const value2 = ref()
const shortcuts = [
{
text: 'This Year',
value: [new Date(), new Date()],
},
{
text: 'Last 10 years',
value: () => {
const end = new Date()
const start = new Date(
new Date().setFullYear(new Date().getFullYear() - 10)
)
return [start, end]
},
},
{
text: 'Next 50 years',
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: 1.5rem 0;
text-align: center;
border-right: solid 1px var(--elp-border-color);
flex: 1;
min-width: 300px;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--elp-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
}
@media screen and (max-width: 768px) {
.demo-date-picker .block {
flex: 0 0 100%;
padding: 1rem 0;
min-width: auto;
border-right: none;
border-bottom: solid 1px var(--elp-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>隐藏源代码
默认值
日期选择器会在用户未选择任何日期的时候默认展示当天的日期。 你也可以使用 default-value 来修改这个默认的日期。 请注意该值需要是一个可以解析的 new Date() 对象。
如果类型是 daterange, default-value 则会设置左边窗口的默认值。
date
daterange
-
vue
<template>
<div class="demo-date-picker">
<div class="block">
<span class="demonstration">date</span>
<el-date-picker
v-model="value1"
type="date"
placeholder="Pick a date"
:default-value="new Date(2010, 9, 1)"
/>
</div>
<div class="block">
<span class="demonstration">daterange</span>
<el-date-picker
v-model="value2"
type="daterange"
start-placeholder="Start Date"
end-placeholder="End Date"
:default-value="[new Date(2010, 9, 1), new Date(2010, 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: 1.5rem 0;
text-align: center;
border-right: solid 1px var(--elp-border-color);
flex: 1;
min-width: 300px;
display: flex;
flex-direction: column;
align-items: center;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--elp-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
}
@media screen and (max-width: 768px) {
.demo-date-picker .block {
flex: 0 0 100%;
padding: 1rem 0;
min-width: auto;
border-right: none;
border-bottom: solid 1px var(--elp-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>隐藏源代码
日期格式
使用format指定输入框的格式。 使用 value-format 指定绑定值的格式。
默认情况下，组件接受并返回Date对象。
在 这里 查看 Day.js 支持的所有格式。
WARNING
请一定要注意传入参数的大小写是否正确
Emits Date object
Value:
Use value-format
Value：
Timestamp
Value：
vue
<template>
<div class="demo-date-picker">
<div class="block">
<span class="demonstration">Emits Date object</span>
<div class="demonstration">Value: {{ value1 }}</div>
<el-date-picker
v-model="value1"
type="date"
placeholder="Pick a Date"
format="YYYY/MM/DD"
/>
</div>
<div class="block">
<span class="demonstration">Use value-format</span>
<div class="demonstration">Value：{{ value2 }}</div>
<el-date-picker
v-model="value2"
type="date"
placeholder="Pick a Date"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
/>
</div>
<div class="block">
<span class="demonstration">Timestamp</span>
<div class="demonstration">Value：{{ value3 }}</div>
<el-date-picker
v-model="value3"
type="date"
placeholder="Pick a Date"
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: 1.5rem 0;
text-align: center;
border-right: solid 1px var(--elp-border-color);
flex: 1;
min-width: 300px;
display: flex;
flex-direction: column;
align-items: center;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--elp-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
width: 100%;
}
@media screen and (max-width: 1200px) {
.demo-date-picker .block {
flex: 0 0 50%;
border-bottom: solid 1px var(--elp-border-color);
}
.demo-date-picker .block:nth-child(2n) {
border-right: none;
}
.demo-date-picker .block:nth-last-child(-n + 2):nth-child(2n + 1),
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
@media screen and (max-width: 768px) {
.demo-date-picker .block {
flex: 0 0 100%;
padding: 1rem 0;
min-width: auto;
border-right: none;
border-bottom: solid 1px var(--elp-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>隐藏源代码
默认显示日期
在选择日期范围时，你可以指定起始日期和结束日期的默认时间。
默认情况下，开始日期和结束日期的时间部分都是选择日期当日的 00:00:00。 通过 default-time 可以分别指定开始日期和结束日期的具体时刻。 它接受最多两个日期对象的数组。 其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。
Component value：
-
vue
<template>
<div class="demo-date-picker">
<div class="block">
<p>Component value：{{ value }}</p>
<el-date-picker
v-model="value"
type="daterange"
start-placeholder="Start date"
end-placeholder="End date"
value-format="YYYY-MM-DD HH:mm:ss"
: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;
border-right: solid 1px var(--elp-border-color);
flex: 1;
}
.demo-date-picker .block:last-child {
border-right: none;
}
</style>隐藏源代码
设置自定义前缀的内容
前缀内容可以被自定义。
当你从其他vue组件或由渲染函数生成的组件中导入组件时, 你可以设置 prefix-icon 属性来定制前缀内容
set prefix-icon
pre
vue
<template>
<div class="demo-date-picker">
<div class="block">
<span class="demonstration">set prefix-icon</span>
<el-date-picker
v-model="value1"
type="date"
placeholder="Pick a day"
:prefix-icon="customPrefix"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { h, ref, shallowRef } from 'vue'
const value1 = 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;
border-right: solid 1px var(--elp-border-color);
flex: 1;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--elp-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
</style>隐藏源代码
自定义内容
弹出框的内容是可以自定义的，在插槽内你可以获取到当前单元格的数据 请注意，自定义内容结构应与默认结构一致，否则可能风格会不一致。
vue
<template>
<div class="demo-date-picker">
<el-date-picker
v-model="value"
type="date"
placeholder="Pick a day"
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>
</el-date-picker>
<el-date-picker v-model="month" type="month" placeholder="Pick a month">
<template #default="cell">
<div class="elp-date-table-cell" :class="{ current: cell.isCurrent }">
<span class="elp-date-table-cell__text">{{ cell.text + 1 }}期</span>
</div>
</template>
</el-date-picker>
<el-date-picker v-model="year" type="year" placeholder="Pick a year">
<template #default="cell">
<div class="elp-date-table-cell" :class="{ current: cell.isCurrent }">
<span class="elp-date-table-cell__text">{{ cell.text + 1 }}y</span>
</div>
</template>
</el-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;
flex-wrap: wrap;
gap: 1rem;
}
.demo-date-picker > * {
margin: 0 !important;
}
.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(--elp-color-danger);
border-radius: 50%;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
.demo-date-picker {
gap: 1.5rem;
}
}
</style>隐藏源代码
自定义图标 2.8.0
使用插槽自定义图标。
date
date range
-
month range
-
year range
To
vue
<template>
<div class="demo-date-picker-icon">
<div class="container">
<div class="block">
<div class="demonstration">date</div>
<el-date-picker
v-model="value1"
type="date"
placeholder="Pick a day"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
>
<template #prev-month>
<el-icon><CaretLeft /></el-icon>
</template>
<template #next-month>
<el-icon><CaretRight /></el-icon>
</template>
<template #prev-year>
<el-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>
</el-icon>
</template>
<template #next-year>
<el-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>
</el-icon>
</template>
</el-date-picker>
</div>
<div class="line" />
<div class="block">
<div class="demonstration">date range</div>
<el-date-picker
v-model="value2"
type="daterange"
start-placeholder="Start date"
end-placeholder="End date"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
unlink-panels
>
<template #prev-month>
<el-icon><CaretLeft /></el-icon>
</template>
<template #next-month>
<el-icon><CaretRight /></el-icon>
</template>
<template #prev-year>
<el-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>
</el-icon>
</template>
<template #next-year>
<el-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>
</el-icon>
</template>
</el-date-picker>
</div>
</div>
<div class="container">
<div class="line" />
<div class="block">
<div class="demonstration">month range</div>
<el-date-picker
v-model="value3"
type="monthrange"
start-placeholder="Start date"
end-placeholder="End date"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
unlink-panels
>
<template #prev-month>
<el-icon><CaretLeft /></el-icon>
</template>
<template #next-month>
<el-icon><CaretRight /></el-icon>
</template>
<template #prev-year>
<el-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>
</el-icon>
</template>
<template #next-year>
<el-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>
</el-icon>
</template>
</el-date-picker>
</div>
<div class="line" />
<div class="block">
<div class="demonstration">year range</div>
<el-date-picker
v-model="value4"
type="yearrange"
range-separator="To"
start-placeholder="Start Year"
end-placeholder="End Year"
>
<template #prev-year>
<el-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>
</el-icon>
</template>
<template #next-year>
<el-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>
</el-icon>
</template>
</el-date-picker>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { CaretLeft, CaretRight } from '@element-plus/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;
gap: 1px;
}
.demo-date-picker-icon .container {
flex: 1;
min-width: 400px;
border-right: solid 1px var(--elp-border-color);
display: flex;
flex-direction: column;
}
.demo-date-picker-icon .container:last-child {
border-right: none;
}
.demo-date-picker-icon .block {
padding: 1.5rem 0;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.demo-date-picker-icon .block:not(:first-child) {
border-top: solid 1px var(--elp-border-color);
}
.demo-date-picker-icon .demonstration {
display: block;
color: var(--elp-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
width: 100%;
}
@media screen and (max-width: 1200px) {
.demo-date-picker-icon {
gap: 0;
}
.demo-date-picker-icon .container {
flex: 0 0 100%;
min-width: auto;
border-right: none;
}
.demo-date-picker-icon .container:not(:last-child) {
border-bottom: solid 1px var(--elp-border-color);
}
.demo-date-picker-icon .block {
padding: 1rem 0;
}
.demo-date-picker-icon .block:not(:first-child) {
position: relative;
margin-top: -1px;
}
}
</style>隐藏源代码
更详细的数据类型，请查看下表
ts
interface DateCell {
column: number
customClass: string | undefined
disabled: boolean
end: boolean
inRange: boolean
row: number
selected: Dayjs | undefined
isCurrent: boolean | undefined
isSelected: boolean
renderText: string | undefined
start: boolean
text: number
timestamp: number
date: Date
dayjs: Dayjs
type: 'normal' | 'today' | 'week' | 'next-month' | 'prev-month'
}国际化
由于 Element Plus 的默认语言为英语，如果你需要设置其它的语言，请参考国际化文档。
要注意的是：日期相关的文字（月份，每一周的第一天等等）也都是通过国际化来配置的。
API
属性
| 属性名 | 说明 | 类型 | 默认 |
|---|---|---|---|
| model-value / v-model | 绑定值，如果是 range 选择器，数组长度应为 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 | 显示在输入框中的格式 | string 参考 日期格式 | YYYY-MM-DD |
| popper-class | DatePicker 下拉框的类名 | string | — |
| popper-style | 弹出内容的自定义样式 | string / object | — |
| popper-options | 自定义 popper 选项，更多请参考 popper.js | object | {} |
| range-separator | 选择范围时的分隔符 | string | '-' |
| default-value | 可选，选择器打开时默认显示的时间 | object | — |
| default-time | 范围选择时选中日期所使用的当日内具体时刻 | object | — |
| value-format | 可选，绑定值的格式。 不指定则绑定值为 Date 对象 | string 参考 日期格式 | — |
| id | 等价于原生 input id 属性 | string / array | — |
| name | 等价于原生 input name 属性 | string / array | '' |
| unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean | false |
| prefix-icon | 自定义前缀图标 如果 type的值是TimeLikeType，那么就是 Clock，不然就是 Calendar | string / object | '' |
| clear-icon | 自定义清除图标 | string / object | CircleClose |
| validate-event | 是否触发表单验证 | boolean | true |
| disabled-date | 一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。 | Function | — |
| shortcuts | 设置快捷选项，需要传入数组对象 | array | [] |
| cell-class-name | 设置自定义类名 | Function | — |
| teleported | 是否将 date-picker 的下拉列表插入至 body 元素 | boolean | true |
| empty-values 2.7.0 | 组件的空值配置， 参考config-provider | array | — |
| value-on-clear 2.7.0 | 清空选项的值， 参考config-provider | string / number / boolean / Function | — |
| fallback-placements 2.8.4 | Tooltip 可用的 positions 请查看popper.js 文档 | array | ['bottom', 'top', 'right', 'left'] |
| placement 2.8.4 | 下拉框出现的位置 | Placement | bottom |
| show-footer 2.10.5 | 是否显示 footer | boolean | true |
| show-confirm 2.11.0 | 是否显示确定按钮 | boolean | true |
| show-week-number 2.10.3 | 显示周数(除周外) | boolean | false |
| automatic-dropdown 2.11.4 | 该属性决定在输入框获得焦点时日期选择面板是否弹出。 （在 3.0 版本中，默认值将设置为 false） | boolean | true |
事件
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 当用户确认值或点击外部时触发 | Function |
| blur | 在组件 Input 失去焦点时触发 | Function |
| focus | 在组件 Input 获得焦点时触发 | Function |
| clear 2.7.7 | 当点击清除按钮时触发 | Function |
| calendar-change | 在日历所选日期更改时触发 仅用于 range | Function |
| panel-change | 当日期面板改变时触发。 | Function |
| visible-change | 当 DatePicker 的下拉列表出现/消失时触发 | Function |
插槽
| 名称 | 说明 |
|---|---|
| default | 自定义单元格内容 |
| range-separator | 自定义范围分割符内容 |
| prev-month 2.8.0 | 上个月的图标 |
| next-month 2.8.0 | 下个月的图标 |
| prev-year 2.8.0 | 上一年图标 |
| next-year 2.8.0 | 下一年图标 |
暴露
| 方法名 | 说明 | 类型 |
|---|---|---|
| focus | 使组件获取焦点 | Function |
| blur 2.8.7 | 使组件失去焦点 | Function |
| handleOpen 2.2.16 | 打开日期选择器弹窗 | Function |
| handleClose 2.2.16 | 关闭日期选择器弹窗 | 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'