日期选择器
使用日期选择器进行日期输入。
日期选择器会以底部弹层面板呈现，范围选择会保持起止两端在同一套流程中完成。
输入日期
基本日期选择器以“天”为单位。
测量值由 type 属性确定。您可以通过 shortcuts 属性启用快速选项。禁用日期由disabledDate 设置，这是一个函数。
首选日期选择主要配送日期
轻触一次即可打开底部面板，并在页脚完成确认。
备选方案通过快捷选项减少重复操作
这里禁用了未来日期，用于模拟有限预约窗口。
vue
<template>
<DemoBlock>
<div class="demo-block__stack">
<div class="demo-block__section">
<span class="demo-block__caption">首选日期</span>
<strong>选择主要配送日期</strong>
<el-date-picker
v-model="value1"
clearable
type="date"
placeholder="请选择配送日期"
/>
<p>轻触一次即可打开底部面板，并在页脚完成确认。</p>
</div>
<div class="demo-block__section">
<span class="demo-block__caption">备选方案</span>
<strong>通过快捷选项减少重复操作</strong>
<el-date-picker
v-model="value2"
type="date"
placeholder="请选择备选日期"
:disabled-date="disabledDate"
:shortcuts="shortcuts"
/>
<p>这里禁用了未来日期，用于模拟有限预约窗口。</p>
</div>
</div>
</DemoBlock>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import DemoBlock from '../components/demo-block.vue'
const value1 = ref('')
const value2 = ref('')
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>隐藏来源
其他测量
您可以通过扩展标准日期选择器组件来选择周、月、年或多个日期。
周
多日
单年
多年
单月
多月
vue
<template>
<div class="demo-date-picker">
<div class="container">
<div class="block">
<span class="demonstration">周</span>
<el-date-picker
v-model="value1"
type="week"
format="[第] ww [周]"
placeholder="请选择周"
/>
</div>
<div class="block">
<span class="demonstration">多日</span>
<el-date-picker
v-model="value2"
type="dates"
placeholder="请选择一个或多个日期"
/>
</div>
</div>
<div class="container">
<div class="block">
<span class="demonstration">单年</span>
<el-date-picker v-model="value3" type="year" placeholder="请选择年份" />
</div>
<div class="block">
<span class="demonstration">多年</span>
<el-date-picker
v-model="value4"
type="years"
placeholder="请选择一个或多个年份"
/>
</div>
</div>
<div class="container">
<div class="block">
<span class="demonstration">单月</span>
<el-date-picker
v-model="value5"
type="month"
placeholder="请选择月份"
/>
</div>
<div class="block">
<span class="demonstration">多月</span>
<el-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 .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>隐藏来源
日期范围
支持选择日期范围。
范围选择会保持起止日期在同一套流程中完成，也可以通过快捷选项减少操作次数。
默认范围选择准确的出行时间段
至
输入框保持紧凑，日期面板则从底部展开。
快捷预设一键切换到常用时间范围
至
当用户经常选择相同范围时，快捷项会明显减少操作成本。
vue
<template>
<DemoBlock>
<div class="demo-block__stack">
<div class="demo-block__section">
<span class="demo-block__caption">默认范围</span>
<strong>选择准确的出行时间段</strong>
<el-date-picker
v-model="value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
<p>输入框保持紧凑，日期面板则从底部展开。</p>
</div>
<div class="demo-block__section">
<span class="demo-block__caption">快捷预设</span>
<strong>一键切换到常用时间范围</strong>
<el-date-picker
v-model="value2"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:shortcuts="shortcuts"
/>
<p>当用户经常选择相同范围时，快捷项会明显减少操作成本。</p>
</div>
</div>
</DemoBlock>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import DemoBlock from '../components/demo-block.vue'
const value1 = ref('')
const value2 = 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>隐藏来源
月份范围
支持选择月份范围。
月份范围选择同样遵循底部弹出式交互，适合报表周期或账单周期设置。
月份范围选择报表周期
至
底部面板会将整套流程保持在同一块纵向区域中。
常用区间为高频报表提供快捷选项
至
本月、最近六个月这类常用选项能显著降低操作成本。
vue
<template>
<DemoBlock>
<div class="demo-block__stack">
<div class="demo-block__section">
<span class="demo-block__caption">月份范围</span>
<strong>选择报表周期</strong>
<el-date-picker
v-model="value1"
type="monthrange"
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份"
/>
<p>底部面板会将整套流程保持在同一块纵向区域中。</p>
</div>
<div class="demo-block__section">
<span class="demo-block__caption">常用区间</span>
<strong>为高频报表提供快捷选项</strong>
<el-date-picker
v-model="value2"
type="monthrange"
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份"
:shortcuts="shortcuts"
/>
<p>本月、最近六个月这类常用选项能显著降低操作成本。</p>
</div>
</div>
</DemoBlock>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import DemoBlock from '../components/demo-block.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>隐藏来源
年份范围 2.8.0
支持选择年份范围。
年份范围选择沿用同样的面板模式，适合长期规划场景。
规划区间选择起始年份与结束年份
至
年份范围选择会始终保持在单列堆叠布局中。
快捷切换通过常用规划周期快速选择
至
这类预设区间适用于年度规划或归档筛选。
vue
<template>
<DemoBlock>
<div class="demo-block__stack">
<div class="demo-block__section">
<span class="demo-block__caption">规划区间</span>
<strong>选择起始年份与结束年份</strong>
<el-date-picker
v-model="value1"
type="yearrange"
range-separator="至"
start-placeholder="开始年份"
end-placeholder="结束年份"
/>
<p>年份范围选择会始终保持在单列堆叠布局中。</p>
</div>
<div class="demo-block__section">
<span class="demo-block__caption">快捷切换</span>
<strong>通过常用规划周期快速选择</strong>
<el-date-picker
v-model="value2"
type="yearrange"
range-separator="至"
start-placeholder="开始年份"
end-placeholder="结束年份"
:shortcuts="shortcuts"
/>
<p>这类预设区间适用于年度规划或归档筛选。</p>
</div>
</div>
</DemoBlock>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import DemoBlock from '../components/demo-block.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: '未来五十年',
value: () => {
const start = new Date()
const end = new Date(
new Date().setFullYear(new Date().getFullYear() + 50)
)
return [start, end]
},
},
]
</script>隐藏来源
默认值
如果用户未选择日期，则默认显示今天的日历。您可以使用 default-value 设置另一个日期。它的值应该可以由 new Date() 解析。
如果类型为 daterange，则 default-value 设置左侧日历。
单日
日期范围
-
vue
<template>
<div class="demo-date-picker">
<div class="block">
<span class="demonstration">单日</span>
<el-date-picker
v-model="value1"
type="date"
placeholder="请选择日期"
:default-value="new Date(2010, 9, 1)"
/>
</div>
<div class="block">
<span class="demonstration">日期范围</span>
<el-date-picker
v-model="value2"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
: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 所有可用格式的列表。
WARNING
注意大小写
输出日期对象
当前值：
使用值格式
当前值：
时间戳
当前值：
vue
<template>
<div class="demo-date-picker">
<div class="block">
<span class="demonstration">输出日期对象</span>
<div class="demonstration">当前值：{{ value1 }}</div>
<el-date-picker
v-model="value1"
type="date"
placeholder="请选择日期"
format="YYYY/MM/DD"
/>
</div>
<div class="block">
<span class="demonstration">使用值格式</span>
<div class="demonstration">当前值：{{ value2 }}</div>
<el-date-picker
v-model="value2"
type="date"
placeholder="请选择日期"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
/>
</div>
<div class="block">
<span class="demonstration">时间戳</span>
<div class="demonstration">当前值：{{ value3 }}</div>
<el-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: 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>组件值：{{ value }}</p>
<el-date-picker
v-model="value"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
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 导入或由渲染函数生成的组件。
自定义前缀图标
前
vue
<template>
<div class="demo-date-picker">
<div class="block">
<span class="demonstration">自定义前缀图标</span>
<el-date-picker
v-model="value1"
type="date"
placeholder="请选择日期"
: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', '前')
},
})
</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>隐藏来源
自定义内容
cell的内容可以自定义，在scoped-slot中可以获取cell的数据。注意，自定义的内容结构要和默认的结构一致，否则可能会出现风格错位的情况。
vue
<template>
<div class="demo-date-picker">
<el-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>
</el-date-picker>
<el-date-picker v-model="month" type="month" placeholder="请选择月份">
<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="请选择年份">
<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>
</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: var(--el-color-primary);
color: var(--el-color-white);
}
.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">单日</div>
<el-date-picker
v-model="value1"
type="date"
placeholder="请选择日期"
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">日期范围</div>
<el-date-picker
v-model="value2"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
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>
<div class="container">
<div class="line" />
<div class="block">
<div class="demonstration">月份范围</div>
<el-date-picker
v-model="value3"
type="monthrange"
start-placeholder="开始月份"
end-placeholder="结束月份"
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">年份范围</div>
<el-date-picker
v-model="value4"
type="yearrange"
range-separator="至"
start-placeholder="开始年份"
end-placeholder="结束年份"
>
<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 from '~icons/ep/caret-left'
import CaretRight from '~icons/ep/caret-right'
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
属性
| 名称 | 描述 | 类型 | 默认 |
|---|---|---|---|
| 模型值 / v 模型 | 绑定值，如果是 range 选择器，则数组长度应为 2 | 数字 / 字符串 / 日期 / 数组 | '' |
| 只读 | DatePicker 是否为只读 | 布尔值 | 假 |
| 已禁用 | DatePicker 是否被禁用 | 布尔值 | 假 |
| 尺寸 | 输入的大小 | 枚举 | — |
| 可编辑 | 输入是否可编辑 | 布尔值 | 真实 |
| 可清除 | 是否显示清除按钮 | 布尔值 | 真实 |
| 占位符 | 非范围模式下的占位符 | 字符串 | '' |
| 开始占位符 | 范围模式下开始日期的占位符 | 字符串 | — |
| 结束占位符 | 范围模式下结束日期的占位符 | 字符串 | — |
| 类型 | 选取器的类型 | 枚举 | 日期 |
| 格式 | 输入框中显示值的格式 | 字符串 请参阅日期格式 | 年-月-日 |
| 波普尔级 | DatePicker 下拉菜单的自定义类名 | 字符串 | — |
| 波普风格 | DatePicker 下拉菜单的自定义样式 | 字符串 / 对象 | — |
| 范围分隔符 | 范围分隔符 | 字符串 | '-' |
| 默认值 | 可选，日历的默认日期 | 对象 | — |
| 默认时间 | 可选，选择日期范围时使用的时间值 | 对象 | — |
| 值格式 | 可选，绑定值的格式。如果未指定，绑定值将为 Date 对象 | 字符串 请参阅日期格式 | — |
| 编号 | 与本机输入中的 id 相同 | 字符串 / 数组 | — |
| 名称 | 与本机输入中的 name 相同 | 字符串 / 数组 | '' |
| 前缀图标 | 自定义前缀图标组件。默认情况下，如果 type 的值为 TimeLikeType，则该值为 Clock，否则为 Calendar | 字符串 / 对象 | '' |
| 清除图标 | 自定义透明图标组件 | 字符串 / 对象 | CircleClose |
| 验证事件 | 是否触发表单验证 | 布尔值 | 真实 |
| 禁用日期 | 确定某个日期是否被禁用并以该日期作为参数的函数。应该返回一个布尔值 | 功能 | — |
| 快捷方式 | 用于设置快捷方式选项的对象数组 | 数组 | [] |
| 细胞类别名称 | 设置自定义类名 | 功能 | — |
| 空值 2.7.0 | 组件的空值，参见配置提供程序 | 数组 | — |
| 清除值 2.7.0 | 清除返回值，参见配置提供程序 | 字符串 / 数字 / 布尔值 / 函数 | — |
| 显示页脚 2.10.5 | 是否显示页脚 | 布尔值 | 真实 |
| 显示确认 2.11.0 | 是否显示确认按钮 | 布尔值 | 真实 |
| 显示周数 2.10.3 | 除星期外还显示星期数 | 布尔值 | 假 |
| 自动下拉2.11.4 | 该属性决定当输入焦点时是否弹出日期选择器面板。 （3.0版本中默认值将设置为false） | 布尔值 | 真实 |
活动
| 名称 | 描述 | 类型 |
|---|---|---|
| 改变 | 当用户确认值或单击外部 | 时触发功能 |
| 模糊 | 当输入模糊时触发 | 功能 |
| 焦点 | 当输入聚焦时触发 | 功能 |
| 清除 2.7.7 | 单击清除按钮时触发 | 功能 |
| 日历更改 | 当日历选择的日期更改时触发。仅适用于 range | 功能 |
| 面板更换 | 单击导航按钮时触发。 | 功能 |
| 可见变化 | 当 DatePicker 的下拉菜单出现/消失时触发 | 功能 |
老虎机
| 名称 | 描述 |
|---|---|
| 默认 | 自定义单元格内容 |
| 范围分隔符 | 自定义范围分隔符内容 |
| 上个月 2.8.0 | 上个月图标 |
| 下个月 2.8.0 | 下个月图标 |
| 去年 2.8.0 | 上一年图标 |
| 明年 2.8.0 | 明年图标 |
暴露
| 名称 | 描述 | 类型 |
|---|---|---|
| 焦点 | 聚焦 DatePicker 组件 | 功能 |
| 模糊 2.8.7 | 模糊 DatePicker 组件 | 功能 |
| 处理打开 2.2.16 | 打开 DatePicker 弹出窗口 | 功能 |
| 处理关闭 2.2.16 | 关闭 DatePicker 弹出窗口 | 功能 |
类型声明
显示声明
ts
type TimeLikeType = 'datetime' | 'datetimerange'