日期时间选择器
在一个选择器中选择日期和时间。
TIP
DateTimePicker 派生自 DatePicker 和 TimePicker。关于属性更详细的解释可以参考DatePicker和TimePicker。
日期和时间选择都会收敛到同一个底部面板流程里。
日期和时间
通过将 type 设置为 datetime，您可以在一个选择器中同时选择日期和时间。这两个步骤会保留在同一套底部面板流程里。
会面时间在同一流程中选择日期和时间
底部面板会将两个步骤整合在一条纵向流程中。
快捷预约针对常见场景使用快捷项
快捷项能帮助用户以更少点击完成高频预约。
默认时段预填最常用的时间段
当预约通常在中午附近开始时，预设时间会更加实用。
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="datetime"
placeholder="请选择日期和时间"
/>
<p>底部面板会将两个步骤整合在一条纵向流程中。</p>
</div>
<div class="demo-block__section">
<span class="demo-block__caption">快捷预约</span>
<strong>针对常见场景使用快捷项</strong>
<el-date-picker
v-model="value2"
type="datetime"
placeholder="请选择日期和时间"
:shortcuts="shortcuts"
/>
<p>快捷项能帮助用户以更少点击完成高频预约。</p>
</div>
<div class="demo-block__section">
<span class="demo-block__caption">默认时段</span>
<strong>预填最常用的时间段</strong>
<el-date-picker
v-model="value3"
type="datetime"
placeholder="请选择日期和时间"
:default-time="defaultTime"
/>
<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 value3 = ref('')
const defaultTime = new Date(2000, 1, 1, 12, 0, 0)
const shortcuts = [
{
text: '今天',
value: new Date(),
},
{
text: '昨天',
value: () => {
const date = new Date()
date.setDate(date.getDate() - 1)
return date
},
},
{
text: '一周前',
value: () => {
const date = new Date()
date.setDate(date.getDate() - 7)
return date
},
},
]
</script>隐藏来源
日期时间格式
使用 format 控制输入框中显示文本的格式。使用 value-format 控制绑定值的格式。
默认情况下，组件接受并发出 Date 对象。
检查 此处 Day.js 所有可用格式的列表。
WARNING
注意大小写
输出日期对象
当前值：
使用值格式
当前值：
时间戳
当前值：
vue
<template>
<div class="demo-datetime-picker">
<div class="block">
<span class="demonstration">输出日期对象</span>
<div class="demonstration">当前值：{{ value1 }}</div>
<el-date-picker
v-model="value1"
type="datetime"
placeholder="请选择日期时间"
format="YYYY/MM/DD HH:mm:ss"
/>
</div>
<div class="block">
<span class="demonstration">使用值格式</span>
<div class="demonstration">当前值：{{ value2 }}</div>
<el-date-picker
v-model="value2"
type="datetime"
placeholder="请选择日期时间"
format="YYYY/MM/DD hh:mm:ss"
value-format="YYYY-MM-DD h:m:s a"
/>
</div>
<div class="block">
<span class="demonstration">时间戳</span>
<div class="demonstration">当前值：{{ value3 }}</div>
<el-date-picker
v-model="value3"
type="datetime"
placeholder="请选择日期时间"
format="YYYY/MM/DD hh:mm:ss"
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-datetime-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-datetime-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 300px;
}
.demo-datetime-picker .block:last-child {
border-right: none;
}
.demo-datetime-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
@media (max-width: 768px) {
.demo-datetime-picker .block {
flex: 100%;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.demo-datetime-picker .block:last-child {
border-bottom: none;
}
:deep(.el-date-editor.el-input) {
width: 100%;
}
:deep(.el-date-editor.el-input__wrapper) {
width: 100%;
max-width: 300px;
}
}
</style>隐藏来源
下拉面板中的日期和时间格式
使用 date-format 和 time-format 控制下拉面板输入框中显示文本的格式。
-
vue
<template>
<div class="demo-datetime-picker">
<div class="block">
<el-date-picker
v-model="value1"
type="datetime"
placeholder="请选择日期时间"
format="YYYY-MM-DD HH:mm:ss"
date-format="YYYY年MM月DD日"
time-format="HH:mm"
/>
</div>
<div class="line" />
<div class="block">
<el-date-picker
v-model="value2"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD HH:mm:ss"
date-format="YYYY年MM月DD日"
time-format="HH:mm:ss"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value1 = ref('')
const value2 = ref('')
</script>
<style scoped>
.demo-datetime-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
justify-content: space-around;
align-items: stretch;
}
.demo-datetime-picker .block {
padding: 30px 0;
text-align: center;
min-width: 300px;
flex: 1;
}
.line {
width: 1px;
background-color: var(--el-border-color);
}
@media (max-width: 768px) {
.demo-datetime-picker .block {
flex: 100%;
border-bottom: solid 1px var(--el-border-color);
}
.demo-datetime-picker .block:last-child {
border-bottom: none;
}
.line {
display: none;
}
:deep(.el-date-editor.el-input) {
width: 100%;
}
:deep(.el-date-editor.el-input__wrapper) {
width: 100%;
max-width: 300px;
}
}
</style>隐藏来源
日期和时间范围
您可以通过将 type 设置为 datetimerange 来选择日期和时间范围。
基础范围
至
快捷范围
至
vue
<template>
<div class="demo-datetime-picker">
<div class="block">
<span class="demonstration">基础范围</span>
<el-date-picker
v-model="value1"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
</div>
<div class="block">
<span class="demonstration">快捷范围</span>
<el-date-picker
v-model="value2"
type="datetimerange"
:shortcuts="shortcuts"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value1 = ref<[Date, Date]>([
new Date(2000, 10, 10, 10, 10),
new Date(2000, 10, 11, 10, 10),
])
const value2 = ref('')
const shortcuts = [
{
text: '最近一周',
value: () => {
const end = new Date()
const start = new Date()
start.setDate(start.getDate() - 7)
return [start, end]
},
},
{
text: '最近一个月',
value: () => {
const end = new Date()
const start = new Date()
start.setMonth(start.getMonth() - 1)
return [start, end]
},
},
{
text: '最近三个月',
value: () => {
const end = new Date()
const start = new Date()
start.setMonth(start.getMonth() - 3)
return [start, end]
},
},
]
</script>
<style scoped>
.demo-datetime-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 300px;
}
.block:last-child {
border-right: none;
}
.block .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
@media (max-width: 768px) {
.block {
flex: 100%;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.block:last-child {
border-bottom: none;
}
:deep(.el-date-editor.el-input) {
width: 100%;
}
:deep(.el-date-editor.el-input__wrapper) {
width: 100%;
max-width: 300px;
}
}
</style>隐藏来源
开始日期和结束日期的默认时间值
当在日期面板上选择 datetimerange 类型的日期范围时，00:00:00 将用作开始日期和结束日期的默认时间值。我们可以通过 default-time 属性来控制它。 default-time 接受最多包含两个 Date 对象的数组。第一项控制开始日期的时间值，第二项控制结束日期的时间值。
开始与结束时间统一默认到 12:00:00
-
开始时间默认 12:00:00，结束时间默认 08:00:00
-
vue
<template>
<div class="demo-datetime-picker">
<div class="block">
<span class="demonstration">开始与结束时间统一默认到 12:00:00</span>
<el-date-picker
v-model="value1"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="defaultTime1"
/>
</div>
<div class="block">
<span class="demonstration">
开始时间默认 12:00:00，结束时间默认 08:00:00
</span>
<el-date-picker
v-model="value2"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="defaultTime2"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value1 = ref('')
const value2 = ref('')
const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0) // '12:00:00'
const defaultTime2: [Date, Date] = [
new Date(2000, 1, 1, 12, 0, 0),
new Date(2000, 2, 1, 8, 0, 0),
] // '12:00:00', '08:00:00'
</script>
<style scoped>
.demo-datetime-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 300px;
}
.block:last-child {
border-right: none;
}
.block .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
@media (max-width: 768px) {
.block {
flex: 100%;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.block:last-child {
border-bottom: none;
}
:deep(.el-date-editor.el-input) {
width: 100%;
}
:deep(.el-date-editor.el-input__wrapper) {
width: 100%;
max-width: 300px;
}
}
</style>隐藏来源
自定义图标 2.8.0
带有插槽的自定义图标可用。
-
vue
<template>
<div class="demo-datetime-picker-icon">
<div class="block">
<el-date-picker
v-model="value1"
type="datetime"
placeholder="请选择日期时间"
format="YYYY-MM-DD HH:mm:ss"
date-format="YYYY年MM月DD日"
time-format="HH:mm"
>
<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">
<el-date-picker
v-model="value2"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD HH:mm:ss"
date-format="YYYY年MM月DD日"
time-format="HH:mm:ss"
>
<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>
</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('')
</script>
<style scoped>
.demo-datetime-picker-icon {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
justify-content: space-around;
align-items: stretch;
}
.demo-datetime-picker-icon .block {
padding: 30px 0;
text-align: center;
min-width: 300px;
flex: 1;
}
.line {
width: 1px;
background-color: var(--el-border-color);
}
@media (max-width: 768px) {
.demo-datetime-picker-icon .block {
flex: 100%;
border-bottom: solid 1px var(--el-border-color);
}
.demo-datetime-picker-icon .block:last-child {
border-bottom: none;
}
.line {
display: none;
}
:deep(.el-date-editor.el-input) {
width: 100%;
}
:deep(.el-date-editor.el-input__wrapper) {
width: 100%;
max-width: 300px;
}
}
</style>隐藏来源
API
属性
| 名称 | 描述 | 类型 | 默认 |
|---|---|---|---|
| 模型值 / v 模型 | 绑定值，如果是 range 选择器，则数组长度应为 2 | 数字 / 字符串 / 日期 / 数组 | '' |
| 只读 | DatePicker 是否为只读 | 布尔值 | 假 |
| 已禁用 | DatePicker 是否被禁用 | 布尔值 | 假 |
| 可编辑 | 输入是否可编辑 | 布尔值 | 真实 |
| 可清除 | 是否显示清除按钮 | 布尔值 | 真实 |
| 尺寸 | 输入的大小 | 枚举 | 默认 |
| 占位符 | 非范围模式下的占位符 | 字符串 | — |
| 开始占位符 | 范围模式下开始日期的占位符 | 字符串 | — |
| 结束占位符 | 范围模式下结束日期的占位符 | 字符串 | — |
| 类型 | 选取器的类型 | 枚举 | 日期 |
| 格式 | 输入框中显示值的格式 | 字符串 请参阅日期格式 | YYYY-MM-DD HH:mm:ss |
| 波普尔级 | DateTimePicker 下拉菜单的自定义类名 | 字符串 | — |
| 波普风格 | DateTimePicker 下拉菜单的自定义样式 | 字符串 / 对象 | — |
| 范围分隔符 | 范围分隔符 | 字符串 | '-' |
| 默认值 | 可选，日历的默认日期 | 对象 | — |
| 默认时间 | 选择日期后的默认时间值。如果未指定，将使用时间 00:00:00 | 对象 | — |
| 值格式 | 可选，绑定值的格式。如果未指定，绑定值将为 Date 对象 | 字符串 请参阅日期格式 | — |
| 日期格式 2.4.0 | 可选，输入内部面板中显示的日期格式 | 字符串 请参阅日期格式 | 年-月-日 |
| 时间格式 2.4.0 | 可选，输入内部面板中显示的时间格式 | 字符串 请参阅日期格式 | 时:分:秒 |
| 编号 | 与本机输入中的 id 相同 | 字符串 / 数组 | — |
| 名称 | 与本机输入中的 name 相同 | 字符串 | — |
| 前缀图标 | 自定义前缀图标组件 | 字符串 / Component | 日期 |
| 清除图标 | 自定义透明图标组件 | 字符串 / Component | 圆圈关闭 |
| 快捷方式 | 用于设置快捷方式选项的对象数组 | 数组 | — |
| 禁用日期 | 确定某个日期是否被禁用并以该日期作为参数的函数。应该返回一个布尔值 | 功能 | — |
| 残疾人时间 | 指定无法选择的小时数组 | 功能 | — |
| 伤残分钟数 | 指定无法选择的分钟数组 | 功能 | — |
| 禁用秒 | 指定无法选择的秒数组 | 功能 | — |
| 细胞类别名称 | 设置自定义类名 | 功能 | — |
| 空值 2.7.0 | 组件的空值，参见配置提供程序 | 数组 | — |
| 清除值 2.7.0 | 清除返回值，参见配置提供程序 | 字符串 / 数字 / 布尔值 / 函数 | — |
| 现在显示 2.8.7 | 是否显示立即按钮 | 布尔值 | 真实 |
| 显示页脚 2.10.5 | 是否显示日期选择器为 1 的页脚 enum | 布尔值 | 真实 |
| 显示确认 2.11.0 | 是否显示确认按钮 | 布尔值 | 真实 |
| 显示周数 2.10.3 | 除星期外还显示星期数 | boolean | 假 |
活动
| 名称 | 描述 | 参数 |
|---|---|---|
| 改变 | 当用户确认值或单击外部 | 时触发功能 |
| 模糊 | 当输入模糊时触发 | 功能 |
| 焦点 | 当输入聚焦时触发 | 功能 |
| 清除 2.7.7 | 单击清除按钮时触发 | 功能 |
| 日历更改 | 当日历选择的日期更改时触发。仅适用于range | 功能 |
| 面板更换 | 单击导航按钮时触发。 | 功能 |
| 可见变化 | 当 DateTimePicker 的下拉菜单出现/消失时触发 | 功能 |
老虎机
| 名称 | 描述 |
|---|---|
| 默认 | 自定义单元格内容 |
| 范围分隔符 | 自定义范围分隔符内容 |
| 上个月 2.8.0 | 上个月图标 |
| 下个月 2.8.0 | 下个月图标 |
| 去年 2.8.0 | 上一年图标 |
| 明年 2.8.0 | 明年图标 |
暴露
| 方法 | 描述 | 类型 |
|---|---|---|
| 焦点 | 聚焦 DatePicker 组件 | 功能 |
| 模糊 2.8.7 | 模糊 DatePicker 组件 | 功能 |
类型声明
显示声明
ts
// DateTimePicker 复用 DatePicker 和 TimePicker 的值类型。