日期选择器
用于输入日期。
输入日期
以「日」为基本单位的日期选择器。
通过 `type` 属性来确定测量的维度。 你可以通过 `shortcuts` 属性来启用快捷选项。 不可用的日期是通过 `disabledDate` 来设置的，它是一个函数。
默认值
带快捷选项的 Picker
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(--el-border-color);
flex: 1;
min-width: 300px;
}
.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: 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(--el-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>隐藏源代码
其他测量维度
您可以通过扩展标准日期选择器组件来选择周、月、年或多个日期。
周
日期
年
年份
月
月份
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(--el-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(--el-border-color);
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-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(--el-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(--el-border-color);
}
}
</style>隐藏源代码
日期范围
支持选择日期范围。
在范围模式下，左右面板默认是联动的。 如果希望两个面板各自切换当前月份，可以使用 `unlink-panels` 属性。
默认值
至
带快捷选项
至
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(--el-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(--el-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(--el-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>隐藏源代码
月份范围
支持选择月份范围。
在范围模式下，左右面板默认是联动的。 如果希望两个面板各自切换当前年份，可以使用 `unlink-panels` 属性。
默认值
至
带快捷选项
至
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(--el-border-color);
flex: 1;
min-width: 300px;
}
.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: 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(--el-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>隐藏源代码
年份范围 2.8.0
支持选择年份范围。
在范围模式下，左右面板默认是联动的。 如果希望两个面板各自切换年份，可以使用 `unlink-panels` 属性。
默认值
至
带快捷选项
至
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(--el-border-color);
flex: 1;
min-width: 300px;
}
.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: 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(--el-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>隐藏源代码
默认值
如果用户未选择日期，则默认显示今天的日历。 您可以使用 `default-value` 设置另一个日期。 它的值应该可以被 `new Date()` 解析。
如果 type 是 `daterange`，`default-value` 会设置左侧日历。
日
日期范围
-
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(--el-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(--el-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(--el-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>隐藏源代码
日期格式
使用 format 属性可以控制输入框中显示的文本格式。 使用 value-format 属性可以控制绑定值的格式。
默认情况下，该组件接受并返回一个 Date 对象。
在此处 查看 Day.js 所有可用的格式。
警告
注意大小写
返回 Date 对象
值
使用 value-format
值：
时间戳
值：
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(--el-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(--el-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(--el-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(--el-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>隐藏源代码
开始日期和结束日期的默认时间
在选择日期范围时，您可以为开始日期和结束日期分配时间部分。
默认情况下，开始日期和结束日期的时间部分都是 `00:00:00`。 设置 `default-time` 可以分别更改它们的时间。 它接受一个最多包含两个 Date 对象的数组。 第一个字符串设置开始日期的时间，第二个字符串设置结束日期的时间。
组件值：
-
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(--el-border-color);
flex: 1;
}
.demo-date-picker .block:last-child {
border-right: none;
}
</style>隐藏源代码
设置前缀的自定义内容
前缀的内容可以自定义。
将 `prefix-icon` 设置为您从其他 .vue 导入或由渲染函数生成的组件。
设置 prefix-icon
前缀
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(--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>隐藏源代码
自定义内容
单元格的内容可以自定义，在作用域插槽中可以获取单元格数据。 注意，自定义内容结构应与默认结构一致，否则可能会出现样式错位。
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="el-date-table-cell" :class="{ current: cell.isCurrent }">
<span class="el-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="el-date-table-cell" :class="{ current: cell.isCurrent }">
<span class="el-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(--el-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
可以使用插槽来自定义图标。
日
日期范围
-
月份范围
-
年份范围
至
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(--el-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(--el-border-color);
}
.demo-date-picker-icon .demonstration {
display: block;
color: var(--el-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(--el-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'
}本地化
默认的区域设置为英文，如果你需要使用其他语言，请参考 国际化
注意，日期时间区域设置 (月份名称、每周第一天等) 也在本地化配置中。
API
属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值，如果它是数组，长度应该是 2 | number / string / object | '' |
| 只读 | 日期选择器是否只读 | boolean | false |
| disabled | DatePicker 是否被禁用 | boolean | false |
| size | 输入框尺寸 | 枚举 | — |
| 可编辑 | 输入框是否可编辑 | boolean | true |
| 可清空 | 是否显示清除按钮 | boolean | true |
| 占位符 | 非范围选择时的占位内容 | string | '' |
| start-placeholder | 范围模式下开始日期的占位符 | string | — |
| end-placeholder | 范围模式下结束日期的占位符 | string | — |
| type | 选择器类型 | 枚举 | 日 |
| format | 输入框中显示值的格式 | string 见 日期格式 | YYYY-MM-DD |
| popper-class | DatePicker 下拉框的自定义类名 | string | — |
| popper-style | DatePicker 下拉框的自定义样式 | string / object | — |
| popper-options | 自定义 popper 选项，更多信息请参考 popper.js | object | {} |
| range-separator | 选择范围时的分隔符 | string | '-' |
| default-value | 可选，选择器打开时默认显示的时间 | object | — |
| 默认时间 | 可选，选择日期范围时使用的时间值 | object | — |
| value-format | 可选，绑定值的格式。 如果未指定，则绑定值为 Date 对象 | string 见 日期格式 | — |
| id | 与原生 input 的 `id` 属性相同 | string / object | — |
| 名称 | 与原生输入框的 `name` 相同 | string / object | '' |
| 取消面板链接 | 在范围选择器中取消两个日期面板的链接 | boolean | false |
| 前缀图标 | 自定义前缀图标组件。 默认情况下，如果 `type` 的值是 `TimeLikeType`，则值为 `Clock`，否则为 `Calendar` | string / object | '' |
| clear-icon | 自定义清除图标组件 | string / object | CircleClose |
| validate-event | 是否触发表单验证 | boolean | true |
| 禁用日期 | 一个用来判断该日期是否被禁用的函数，接受一个日期作为参数。应该返回一个布尔值 | Function | — |
| 快捷选项 | 设置快捷选项的对象数组 | object | [] |
| 单元格类名 | 设置自定义的类名 | Function | — |
| teleported | 日期选择器下拉框是否传送到 body | boolean | true |
| empty-values 2.7.0 | 组件的空值，参见 config-provider | array | — |
| value-on-clear 2.7.0 | 清除后的返回值，参见 config-provider | string / number / boolean / Function | — |
| 备用位置 2.8.4 | 工具提示的可能位置列表 popper.js | array | — |
| 位置 2.8.4 | 下拉框出现的位置 | 位置 | bottom |
| show-footer 2.10.5 | 是否显示页脚 | boolean | true |
| show-confirm 2.11.0 | 是否显示确认按钮 | boolean | true |
| show-week-number 2.10.3 | 在周旁边显示周数 | boolean | false |
事件
| 名称 | 描述 | 类型 |
|---|---|---|
| change | 当用户确认值或点击外部时触发 | Function |
| blur | 在 Input 失去焦点时触发 | Function |
| focus | 在 Input 获得焦点时触发 | Function |
| clear 2.7.7 | 在可清除的 DatePicker 中单击清除图标时触发 | Function |
| 日历更改 | 本日历所选日期发生更改时触发。 仅适用于 range | Function |
| 面板更改 | 在点击导航按钮时触发。 | 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 | 打开 DatePicker 弹出框 | Function |
| handleClose 2.2.16 | 关闭 DatePicker 弹出框 | 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'来源
贡献者
