使用场景
这是双端点日期时间范围的兼容名称；新代码使用 AsamDateTimeRangePicker。它不是单点 datetime 选择器。
两个端点与完整模型
旧名称仍接收 [start, end] 模型，并转发相同参数、事件、插槽和实例方法。
两个端点与完整模型
vue
<template>
<div class="example">
<AsamDateTimePicker
v-model="range"
v-bind="{
'value-format': 'YYYY-MM-DD HH:mm:ss',
'start-placeholder': '开始时间',
'end-placeholder': '结束时间',
clearable: true
}"
@change="event = JSON.stringify($event)"
/>
<output>范围：{{ range }}；事件：{{ event }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamDateTimePickerBasicExample' });
import { ref } from 'vue';
import { AsamDateTimePicker } from '@asam-ui/ui';
import type { DateTimeRangeValue } from '@asam-ui/ui';
const range = ref<DateTimeRangeValue>(null);
const event = ref('尚未提交');
</script>
<style scoped>
.example {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<AsamDateTimePicker
v-model="range"
v-bind="{
'value-format': 'YYYY-MM-DD HH:mm:ss',
'start-placeholder': '开始时间',
'end-placeholder': '结束时间',
clearable: true
}"
@change="event = JSON.stringify($event)"
/>
<output>范围：{{ range }}；事件：{{ event }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamDateTimePickerBasicExample' });
import { ref } from 'vue';
import { AsamDateTimePicker } from '@asam-ui/ui';
const range = ref(null);
const event = ref('尚未提交');
</script>
<style scoped>
.example {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>迁移与完整契约
将导入名和模板标签换成 AsamDateTimeRangePicker，保留现有模型和端点参数。单点日期时间使用 AsamDatePicker。
完整的端点控制、尺寸、本地化、侧栏、空值配置和 API 统一查阅日期时间范围选择器，本兼容页不重复展示。局部与全局浮层配置也见该页面。
端点实例与插槽
完整示例已归到日期时间范围选择器。
四档尺寸与上下文继承
完整示例已归到日期时间范围选择器。
旧名称相同双端点职责
完整示例已归到日期时间范围选择器。
本地化与高级配置的完整 SFC
完整示例已归到日期时间范围选择器。
公开侧栏与快捷项
完整示例已归到日期时间范围选择器。
配置空值和有效零时间戳
完整示例已归到日期时间范围选择器。
API
本入口共用 AsamDateTimeRangePicker 的完整公开契约。参数、事件、插槽与实例方法集中展示于该页面。
继承能力
本入口的独有 API 见上表，基础能力见本站对应页面。