使用场景
以两个独立 datetime 输入编辑开始与结束时间。 模型只在两端完整时提交 [start, end]，空值为 null；部分选择保留在内部。
两个端点与完整模型
startPlaceholder/endPlaceholder 分别设置端点提示。clear 清除范围，change 提交完整范围；valueFormat 决定两个端点的存储形式。
两个端点与完整模型
vue
<template>
<div class="example">
<AsamDateTimeRangePicker
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: 'AsamDateTimeRangePickerBasicExample' });
import { ref } from 'vue';
import { AsamDateTimeRangePicker } 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">
<AsamDateTimeRangePicker
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: 'AsamDateTimeRangePickerBasicExample' });
import { ref } from 'vue';
import { AsamDateTimeRangePicker } 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>端点实例与插槽
focus/blur/handleOpen/handleClose 接收 start 或 end，默认 start。default 单元格插槽额外携带 endpoint；visible-change 同时给出可见性和端点。
端点实例与插槽
vue
<template>
<div class="example">
<AsamDateTimeRangePicker
ref="control"
v-bind="{ 'value-format': 'YYYY-MM-DD HH:mm:ss' }"
v-model="range"
@visible-change="(visible, endpoint) => (event = endpoint + ': ' + visible)"
>
<template #range-separator> 至 </template>
<template #default="cell">
<span>
{{ cell.text }}
</span>
</template>
</AsamDateTimeRangePicker>
<div class="row">
<AsamButton type="default" @click="control?.focus('start')"> 聚焦开始 </AsamButton>
<AsamButton type="default" @click="control?.handleOpen('end')"> 打开结束 </AsamButton>
<AsamButton type="default" @click="control?.handleClose('end')"> 关闭结束 </AsamButton>
</div>
<output>{{ event }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamDateTimeRangePickerEndpointsExample' });
import { ref } from 'vue';
import { AsamDateTimeRangePicker, AsamButton } from '@asam-ui/ui';
import type { AsamDateTimeRangePickerExpose, DateTimeRangeValue } from '@asam-ui/ui';
const control = ref<AsamDateTimeRangePickerExpose>();
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">
<AsamDateTimeRangePicker
ref="control"
v-bind="{ 'value-format': 'YYYY-MM-DD HH:mm:ss' }"
v-model="range"
@visible-change="(visible, endpoint) => (event = endpoint + ': ' + visible)"
>
<template #range-separator> 至 </template>
<template #default="cell">
<span>
{{ cell.text }}
</span>
</template>
</AsamDateTimeRangePicker>
<div class="row">
<AsamButton type="default" @click="control?.focus('start')"> 聚焦开始 </AsamButton>
<AsamButton type="default" @click="control?.handleOpen('end')"> 打开结束 </AsamButton>
<AsamButton type="default" @click="control?.handleClose('end')"> 关闭结束 </AsamButton>
</div>
<output>{{ event }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamDateTimeRangePickerEndpointsExample' });
import { ref } from 'vue';
import { AsamDateTimeRangePicker, AsamButton } from '@asam-ui/ui';
const control = ref();
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>四档尺寸与上下文继承
四个实例分别显式使用 large、big、default、small。下面省略 size 的实例随 ConfigProvider 响应切换；显式 size 覆盖祖先。面板本身没有 size 契约的入口不附加虚构尺寸属性。
四档尺寸与上下文继承
vue
<template>
<div class="example">
<div class="density-grid">
<section>
<strong> large </strong>
<AsamDateTimeRangePicker size="large" value-format="YYYY-MM-DD HH:mm:ss" />
</section>
<section>
<strong> big </strong>
<AsamDateTimeRangePicker size="big" value-format="YYYY-MM-DD HH:mm:ss" />
</section>
<section>
<strong> default </strong>
<AsamDateTimeRangePicker size="default" value-format="YYYY-MM-DD HH:mm:ss" />
</section>
<section>
<strong> small </strong>
<AsamDateTimeRangePicker size="small" value-format="YYYY-MM-DD HH:mm:ss" />
</section>
</div>
<AsamConfigProvider :size="density">
<section>
<AsamDateTimeRangePicker value-format="YYYY-MM-DD HH:mm:ss" />
</section>
</AsamConfigProvider>
<div class="row">
<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
</div>
<output>配置提供器：{{ density }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamDateTimeRangePickerSizesExample' });
import { ref } from 'vue';
import { AsamDateTimeRangePicker, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
const density = ref<AsamControlSize>('big');
</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">
<div class="density-grid">
<section>
<strong> large </strong>
<AsamDateTimeRangePicker size="large" value-format="YYYY-MM-DD HH:mm:ss" />
</section>
<section>
<strong> big </strong>
<AsamDateTimeRangePicker size="big" value-format="YYYY-MM-DD HH:mm:ss" />
</section>
<section>
<strong> default </strong>
<AsamDateTimeRangePicker size="default" value-format="YYYY-MM-DD HH:mm:ss" />
</section>
<section>
<strong> small </strong>
<AsamDateTimeRangePicker size="small" value-format="YYYY-MM-DD HH:mm:ss" />
</section>
</div>
<AsamConfigProvider :size="density">
<section>
<AsamDateTimeRangePicker value-format="YYYY-MM-DD HH:mm:ss" />
</section>
</AsamConfigProvider>
<div class="row">
<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
</div>
<output>配置提供器：{{ density }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamDateTimeRangePickerSizesExample' });
import { ref } from 'vue';
import { AsamDateTimeRangePicker, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
const density = ref('big');
</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>ASAM 扩展与迁移
本入口有两个独立 datetime 弹层。 完整说明。
ASAM 扩展为双端点输入、端点实例、端点事件参数与四档密度。单点日期时间请使用 DatePicker type=datetime。旧 DateTimePicker 是同一范围契约的兼容名称；迁移只更换组件导入和标签，保留 DateTimeRangeValue。不要为本入口传入 type 或单个日期模型。
API 阅读方式
下方 Props、Events、Slots、Exposes 按当前实际公开类型与运行默认值生成。组合属性按分支生效，不能任意混搭值模式。标为“未知 / 未声明”的默认值不代表 false 或空值。源码区域提供对应语言的独立 Demo.vue，可直接复制或下载；本地辅助组件、数据和素材已内联到当前文件。
两端属性、弹层与清空事件
两端属性、弹层与清空事件
vue
<template>
<section class="demo-layout-1">
<!-- prettier-ignore -->
<AsamDateTimeRangePicker
:id="['begin-at', 'finish-at']"
ref="picker"
v-model="value"
:name="['beginAt', 'finishAt']"
:teleported="false"
v-bind="{ 'data-endpoint': 'reservation' }"
:tabindex="3"
:default-time="[new Date(2000, 0, 1, 9), new Date(2000, 0, 1, 17)]"
@clear="clears++"
@change="changes++"
@visible-change="recordVisibility"
/>
<!-- prettier-ignore -->
<AsamButton native-type="submit" type="default" @click="picker?.handleOpen('end')">打开结束端</AsamButton
><AsamButton native-type="submit" type="default" @click="picker?.handleClose('end')"
>关闭结束端</AsamButton
>
<output>{{ { value, clears, changes, endpoint } }}</output>
</section>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamDateTimeRangePickerattrscontractExample' });
import { ref } from 'vue';
import { AsamButton, AsamDateTimeRangePicker } from '@asam-ui/ui';
import type {
DateTimeRangeValue,
AsamDateTimeRangePickerExpose,
AsamDateTimeEndpoint
} from '@asam-ui/ui';
const value = ref<DateTimeRangeValue>(['2026-10-04 09:00:00', '2026-10-05 17:00:00']);
const picker = ref<AsamDateTimeRangePickerExpose>();
const clears = ref(0);
const changes = ref(0);
const endpoint = ref<AsamDateTimeEndpoint>('start');
const recordVisibility = (_visible: boolean, next: AsamDateTimeEndpoint) => {
endpoint.value = next;
};
</script>
<style scoped>
.demo-layout-1 {
display: grid;
gap: var(--asam-space-md);
}
</style>vue
<template>
<section class="demo-layout-1">
<!-- prettier-ignore -->
<AsamDateTimeRangePicker
:id="['begin-at', 'finish-at']"
ref="picker"
v-model="value"
:name="['beginAt', 'finishAt']"
:teleported="false"
v-bind="{ 'data-endpoint': 'reservation' }"
:tabindex="3"
:default-time="[new Date(2000, 0, 1, 9), new Date(2000, 0, 1, 17)]"
@clear="clears++"
@change="changes++"
@visible-change="recordVisibility"
/>
<!-- prettier-ignore -->
<AsamButton native-type="submit" type="default" @click="picker?.handleOpen('end')">打开结束端</AsamButton
><AsamButton native-type="submit" type="default" @click="picker?.handleClose('end')"
>关闭结束端</AsamButton
>
<output>{{ { value, clears, changes, endpoint } }}</output>
</section>
</template>
<script setup>
defineOptions({ name: 'AsamDateTimeRangePickerattrscontractExample' });
import { ref } from 'vue';
import { AsamButton, AsamDateTimeRangePicker } from '@asam-ui/ui';
const value = ref(['2026-10-04 09:00:00', '2026-10-05 17:00:00']);
const picker = ref();
const clears = ref(0);
const changes = ref(0);
const endpoint = ref('start');
const recordVisibility = (_visible, next) => {
endpoint.value = next;
};
</script>
<style scoped>
.demo-layout-1 {
display: grid;
gap: var(--asam-space-md);
}
</style>本地化与高级配置
通过 ConfigProvider 在中文和英文之间切换；该例使用明确公开类型配置本入口的高级属性。尺寸、模型、原生范围与两个独立端点的职责仍按前文分支生效。
日期语言和控件文字是两份配置：本例的 locale.ts / locale.js 同时注册 Day.js 的 zh-cn 日期 locale，中文每周从周一开始，英文从周日开始。 完整说明。
固定版本已经创建的日期对象可能保留旧 locale；本示例切换语言时通过 key 重建控件以更新日期语言，输入弹层会关闭，重新打开即可查看新语言。外部完整模型仍由调用方持有。
本地化与高级配置的完整 SFC
vue
<!-- 此演示还使用 @asam-ui/icons-vue、dayjs，请按官网对应指南配置这些公开依赖。 -->
<template><StandaloneDemo /></template>
<script lang="ts" setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
import * as __external2 from "@asam-ui/icons-vue";
import * as __external3 from "dayjs";
import * as __external4 from "dayjs/locale/zh-cn.js";
const __external: any = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true },
"@asam-ui/icons-vue": { ...__external2, __esModule: true },
"dayjs": { ...__external3, __esModule: true },
"dayjs/locale/zh-cn.js": { ...__external4, __esModule: true }};
const __modules: any = {
"Demo.vue": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const _hoisted_1: any = { class: "demo-layout-1" };
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
const locale_js_1: any = require("./locale.js");
const icons_vue_1: any = require("@asam-ui/icons-vue");
exports.default = (0, vue_1.defineComponent)({
...{ name: 'AsamDateTimeRangePickerAdvancedContractExample' },
__name: 'Demo',
setup(__props?: any) {
const chinese: any = (0, vue_3.ref)(true);
const disabled: any = (0, vue_3.ref)(false);
const changes: any = (0, vue_3.ref)(0);
const value: any = (0, vue_3.ref)(null);
const configuration: any = {
name: ['starts', 'ends'],
id: ['starts-id', 'ends-id'],
valueFormat: 'YYYY-MM-DD HH:mm:ss',
format: 'YYYY/MM/DD HH:mm',
teleported: false,
readonly: false,
clearable: true,
editable: true,
placeholder: '日期时间',
startPlaceholder: '起点',
endPlaceholder: '终点',
rangeSeparator: '到',
popperClass: 'advanced-date-popup',
popperStyle: { borderWidth: '2px' },
popperOptions: { strategy: 'absolute' },
placement: 'bottom',
fallbackPlacements: ['top', 'bottom'],
prefixIcon: icons_vue_1.CaretLeft,
clearIcon: icons_vue_1.CaretRight,
emptyValues: ['', null, undefined],
valueOnClear: null,
defaultValue: new Date(2026, 0, 1, 9, 30),
defaultTime: new Date(2000, 0, 1, 9, 30),
dateFormat: 'YYYY/MM/DD',
timeFormat: 'HH:mm',
showFooter: true,
showConfirm: true,
showWeekNumber: true,
disabledDate: (date?: any) => date.getFullYear() < 2026,
shortcuts: [{ text: '固定日期', value: new Date(2026, 0, 1, 9, 30) }],
cellClassName: (date?: any) => (date.getDate() === 1 ? 'advanced-cell' : ''),
disabledHours: () => [0, 1],
disabledMinutes: (hour?: any) => (hour === 9 ? [0] : []),
disabledSeconds: () => [0]
};
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("section", _hoisted_1, [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamCheckboxItem), {
modelValue: chinese.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((chinese).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(0, vue_2.createTextVNode)("中文本地化", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamCheckboxItem), {
modelValue: disabled.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event?: any) => ((disabled).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_2.createTextVNode)("禁用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamConfigProvider), {
locale: chinese.value ? (0, vue_2.unref)(locale_js_1.zhCn) : (0, vue_2.unref)(locale_js_1.en)
}, {
default: (0, vue_2.withCtx)(() => [
((0, vue_2.openBlock)(), (0, vue_2.createBlock)((0, vue_2.unref)(ui_1.AsamDateTimeRangePicker), (0, vue_2.mergeProps)({
key: chinese.value ? 'zh-cn' : 'en',
modelValue: value.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event?: any) => ((value).value = $event))
}, configuration, {
disabled: disabled.value,
onChange: _cache[3] || (_cache[3] = ($event?: any) => (changes.value++))
}), {
default: (0, vue_2.withCtx)((cell?: any) => [
(0, vue_2.createCommentVNode)(" Scoped cell data stays typed through the public slot. "),
(0, vue_2.createElementVNode)("span", null, (0, vue_2.toDisplayString)(cell.text), 1 /* TEXT */)
]),
"prev-month": (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(icons_vue_1.CaretLeft))
]),
"next-month": (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(icons_vue_1.CaretRight))
]),
"prev-year": (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(icons_vue_1.CaretLeft))
]),
"next-year": (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(icons_vue_1.CaretRight))
]),
"range-separator": (0, vue_2.withCtx)(() => [...(_cache[6] || (_cache[6] = [
(0, vue_2.createTextVNode)("→", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 16 /* FULL_PROPS */, ["modelValue", "disabled"]))
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["locale"]),
(0, vue_2.createElementVNode)("output", null, "模型 " + (0, vue_2.toDisplayString)(value.value) + "；提交次数 " + (0, vue_2.toDisplayString)(changes.value), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-7a4d8ecc";
},
"locale.ts": (module: any, exports: any, require: any) => {
"use strict";
var __importDefault: any = function (mod?: any) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.en = exports.zhCn = void 0;
const dayjs_1: any = __importDefault(require("dayjs"));
const zh_cn_js_1: any = __importDefault(require("dayjs/locale/zh-cn.js"));
// Register date locale on the same public Day.js instance used by the components.
// The third argument preserves the application default; the provider selects per component.
dayjs_1.default.locale(zh_cn_js_1.default, undefined, true);
/** Application-authored dictionary, supplied through the public provider. */
exports.zhCn = {
name: 'zh-cn',
el: {
datepicker: {
now: '当前时刻',
today: '当前日期',
cancel: '取消选择',
clear: '清除选择',
confirm: '应用选择',
dateTablePrompt: '方向键选日期，回车确认',
monthTablePrompt: '方向键选月份',
quarterTablePrompt: '方向键选季度',
yearTablePrompt: '方向键选年份',
selectedDate: '当前选择',
selectDate: '选择日期',
selectTime: '选择时间',
startDate: '起始日期',
startTime: '起始时间',
endDate: '结束日期',
endTime: '结束时间',
prevYear: '上一年',
nextYear: '下一年',
prevMonth: '上一月',
nextMonth: '下一月',
year: '年',
...Object.fromEntries(Array.from({ length: 12 }, (_?: any, index?: any) => ['month' + (index + 1), index + 1 + '月'])),
weeks: {
sun: '周日',
mon: '周一',
tue: '周二',
wed: '周三',
thu: '周四',
fri: '周五',
sat: '周六'
},
months: {
jan: '一月',
feb: '二月',
mar: '三月',
apr: '四月',
may: '五月',
jun: '六月',
jul: '七月',
aug: '八月',
sep: '九月',
oct: '十月',
nov: '十一月',
dec: '十二月'
},
quarters: { q1: '第一季度', q2: '第二季度', q3: '第三季度', q4: '第四季度' }
},
calendar: { prevMonth: '上一月', nextMonth: '下一月', today: '当前日期' },
select: {
loading: '正在读取',
noMatch: '没有匹配时间',
noData: '没有可选时间',
placeholder: '选择时间'
}
}
};
exports.en = {
name: 'en',
el: {
datepicker: {
...exports.zhCn.el.datepicker,
now: 'Now',
today: 'Today',
cancel: 'Cancel',
clear: 'Clear',
confirm: 'OK',
dateTablePrompt: 'Use arrows to select a date',
monthTablePrompt: 'Use arrows to select a month',
quarterTablePrompt: 'Use arrows to select a quarter',
yearTablePrompt: 'Use arrows to select a year',
selectedDate: 'Selected date',
selectDate: 'Select date',
selectTime: 'Select time',
startDate: 'Start date',
startTime: 'Start time',
endDate: 'End date',
endTime: 'End time',
prevYear: 'Previous year',
nextYear: 'Next year',
prevMonth: 'Previous month',
nextMonth: 'Next month',
year: '',
...Object.fromEntries([
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
].map((month?: any, index?: any) => ['month' + (index + 1), month])),
weeks: {
sun: 'Sun',
mon: 'Mon',
tue: 'Tue',
wed: 'Wed',
thu: 'Thu',
fri: 'Fri',
sat: 'Sat'
},
months: {
jan: 'Jan',
feb: 'Feb',
mar: 'Mar',
apr: 'Apr',
may: 'May',
jun: 'Jun',
jul: 'Jul',
aug: 'Aug',
sep: 'Sep',
oct: 'Oct',
nov: 'Nov',
dec: 'Dec'
},
quarters: { q1: 'Q1', q2: 'Q2', q3: 'Q3', q4: 'Q4' }
},
calendar: { prevMonth: 'Previous month', nextMonth: 'Next month', today: 'Today' },
select: {
loading: 'Loading times',
noMatch: 'No matching time',
noData: 'No available time',
placeholder: 'Select a time'
}
}
};
},
};
const __dependencies: any = {"Demo.vue":{"./locale.js":"locale.ts"},"locale.ts":{}};
const __cache: any = Object.create(null);
function __require(id: any): any {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module: any = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency: any) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
<style>
.demo-layout-1[data-v-7a4d8ecc] {
display: grid;
gap: var(--asam-space-md);
}
</style>vue
<!-- 此演示还使用 @asam-ui/icons-vue、dayjs，请按官网对应指南配置这些公开依赖。 -->
<template><StandaloneDemo /></template>
<script setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
import * as __external2 from "@asam-ui/icons-vue";
import * as __external3 from "dayjs";
import * as __external4 from "dayjs/locale/zh-cn.js";
const __external = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true },
"@asam-ui/icons-vue": { ...__external2, __esModule: true },
"dayjs": { ...__external3, __esModule: true },
"dayjs/locale/zh-cn.js": { ...__external4, __esModule: true }};
const __modules = {
"Demo.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { class: "demo-layout-1" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
const locale_js_1 = require("./locale.js");
const icons_vue_1 = require("@asam-ui/icons-vue");
exports.default = Object.assign({ name: 'AsamDateTimeRangePickerAdvancedContractExample' }, {
__name: 'Demo',
setup(__props) {
const chinese = (0, vue_2.ref)(true);
const disabled = (0, vue_2.ref)(false);
const changes = (0, vue_2.ref)(0);
const value = (0, vue_2.ref)(null);
const configuration = {
name: ['starts', 'ends'],
id: ['starts-id', 'ends-id'],
valueFormat: 'YYYY-MM-DD HH:mm:ss',
format: 'YYYY/MM/DD HH:mm',
teleported: false,
readonly: false,
clearable: true,
editable: true,
placeholder: '日期时间',
startPlaceholder: '起点',
endPlaceholder: '终点',
rangeSeparator: '到',
popperClass: 'advanced-date-popup',
popperStyle: { borderWidth: '2px' },
popperOptions: { strategy: 'absolute' },
placement: 'bottom',
fallbackPlacements: ['top', 'bottom'],
prefixIcon: icons_vue_1.CaretLeft,
clearIcon: icons_vue_1.CaretRight,
emptyValues: ['', null, undefined],
valueOnClear: null,
defaultValue: new Date(2026, 0, 1, 9, 30),
defaultTime: new Date(2000, 0, 1, 9, 30),
dateFormat: 'YYYY/MM/DD',
timeFormat: 'HH:mm',
showFooter: true,
showConfirm: true,
showWeekNumber: true,
disabledDate: (date) => date.getFullYear() < 2026,
shortcuts: [{ text: '固定日期', value: new Date(2026, 0, 1, 9, 30) }],
cellClassName: (date) => (date.getDate() === 1 ? 'advanced-cell' : ''),
disabledHours: () => [0, 1],
disabledMinutes: (hour) => (hour === 9 ? [0] : []),
disabledSeconds: () => [0]
};
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("section", _hoisted_1, [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamCheckboxItem), {
modelValue: chinese.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((chinese).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(0, vue_1.createTextVNode)("中文本地化", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamCheckboxItem), {
modelValue: disabled.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((disabled).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_1.createTextVNode)("禁用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamConfigProvider), {
locale: chinese.value ? (0, vue_1.unref)(locale_js_1.zhCn) : (0, vue_1.unref)(locale_js_1.en)
}, {
default: (0, vue_1.withCtx)(() => [
((0, vue_1.openBlock)(), (0, vue_1.createBlock)((0, vue_1.unref)(ui_1.AsamDateTimeRangePicker), (0, vue_1.mergeProps)({
key: chinese.value ? 'zh-cn' : 'en',
modelValue: value.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = $event => ((value).value = $event))
}, configuration, {
disabled: disabled.value,
onChange: _cache[3] || (_cache[3] = $event => (changes.value++))
}), {
default: (0, vue_1.withCtx)((cell) => [
(0, vue_1.createCommentVNode)(" Scoped cell data stays typed through the public slot. "),
(0, vue_1.createElementVNode)("span", null, (0, vue_1.toDisplayString)(cell.text), 1 /* TEXT */)
]),
"prev-month": (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(icons_vue_1.CaretLeft))
]),
"next-month": (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(icons_vue_1.CaretRight))
]),
"prev-year": (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(icons_vue_1.CaretLeft))
]),
"next-year": (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(icons_vue_1.CaretRight))
]),
"range-separator": (0, vue_1.withCtx)(() => [...(_cache[6] || (_cache[6] = [
(0, vue_1.createTextVNode)("→", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 16 /* FULL_PROPS */, ["modelValue", "disabled"]))
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["locale"]),
(0, vue_1.createElementVNode)("output", null, "模型 " + (0, vue_1.toDisplayString)(value.value) + "；提交次数 " + (0, vue_1.toDisplayString)(changes.value), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-2249c55a";
},
"locale.js": (module, exports, require) => {
"use strict";
var __importDefault = function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.en = exports.zhCn = void 0;
const dayjs_1 = __importDefault(require("dayjs"));
const zh_cn_js_1 = __importDefault(require("dayjs/locale/zh-cn.js"));
// Register date locale on the same public Day.js instance used by the components.
// The third argument preserves the application default; the provider selects per component.
dayjs_1.default.locale(zh_cn_js_1.default, undefined, true);
/** Application-authored dictionary, supplied through the public provider. */
exports.zhCn = {
name: 'zh-cn',
el: {
datepicker: {
now: '当前时刻',
today: '当前日期',
cancel: '取消选择',
clear: '清除选择',
confirm: '应用选择',
dateTablePrompt: '方向键选日期，回车确认',
monthTablePrompt: '方向键选月份',
quarterTablePrompt: '方向键选季度',
yearTablePrompt: '方向键选年份',
selectedDate: '当前选择',
selectDate: '选择日期',
selectTime: '选择时间',
startDate: '起始日期',
startTime: '起始时间',
endDate: '结束日期',
endTime: '结束时间',
prevYear: '上一年',
nextYear: '下一年',
prevMonth: '上一月',
nextMonth: '下一月',
year: '年',
...Object.fromEntries(Array.from({ length: 12 }, (_, index) => ['month' + (index + 1), index + 1 + '月'])),
weeks: {
sun: '周日',
mon: '周一',
tue: '周二',
wed: '周三',
thu: '周四',
fri: '周五',
sat: '周六'
},
months: {
jan: '一月',
feb: '二月',
mar: '三月',
apr: '四月',
may: '五月',
jun: '六月',
jul: '七月',
aug: '八月',
sep: '九月',
oct: '十月',
nov: '十一月',
dec: '十二月'
},
quarters: { q1: '第一季度', q2: '第二季度', q3: '第三季度', q4: '第四季度' }
},
calendar: { prevMonth: '上一月', nextMonth: '下一月', today: '当前日期' },
select: {
loading: '正在读取',
noMatch: '没有匹配时间',
noData: '没有可选时间',
placeholder: '选择时间'
}
}
};
exports.en = {
name: 'en',
el: {
datepicker: {
...exports.zhCn.el.datepicker,
now: 'Now',
today: 'Today',
cancel: 'Cancel',
clear: 'Clear',
confirm: 'OK',
dateTablePrompt: 'Use arrows to select a date',
monthTablePrompt: 'Use arrows to select a month',
quarterTablePrompt: 'Use arrows to select a quarter',
yearTablePrompt: 'Use arrows to select a year',
selectedDate: 'Selected date',
selectDate: 'Select date',
selectTime: 'Select time',
startDate: 'Start date',
startTime: 'Start time',
endDate: 'End date',
endTime: 'End time',
prevYear: 'Previous year',
nextYear: 'Next year',
prevMonth: 'Previous month',
nextMonth: 'Next month',
year: '',
...Object.fromEntries([
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
].map((month, index) => ['month' + (index + 1), month])),
weeks: {
sun: 'Sun',
mon: 'Mon',
tue: 'Tue',
wed: 'Wed',
thu: 'Thu',
fri: 'Fri',
sat: 'Sat'
},
months: {
jan: 'Jan',
feb: 'Feb',
mar: 'Mar',
apr: 'Apr',
may: 'May',
jun: 'Jun',
jul: 'Jul',
aug: 'Aug',
sep: 'Sep',
oct: 'Oct',
nov: 'Nov',
dec: 'Dec'
},
quarters: { q1: 'Q1', q2: 'Q2', q3: 'Q3', q4: 'Q4' }
},
calendar: { prevMonth: 'Previous month', nextMonth: 'Next month', today: 'Today' },
select: {
loading: 'Loading times',
noMatch: 'No matching time',
noData: 'No available time',
placeholder: 'Select a time'
}
}
};
},
};
const __dependencies = {"Demo.vue":{"./locale.js":"locale.js"},"locale.js":{}};
const __cache = Object.create(null);
function __require(id) {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
<style>
.demo-layout-1[data-v-2249c55a] {
display: grid;
gap: var(--asam-space-md);
}
</style>公开面板侧栏
sidebar 收到原生 class: string，把它绑定到侧栏根节点可保留布局。 完整说明。
快捷项与自定义侧栏各自渲染一个原生侧栏块；固定版本两块占用同一左侧区域，启用快捷项可能覆盖自定义侧栏内容。示例明确展示此原生组合行为，需要交互的自定义侧栏应关闭快捷项，或把自己的快捷操作放入同一自定义侧栏；ASAM 不额外改变原生几何布局。
公开侧栏与快捷项
配置空值与零时间戳
两个端点使用相同的原生 emptyValues（包括 Provider 继承）和合法 valueOnClear / 函数返回值。 完整说明。
配置空值和有效零时间戳
vue
<template>
<section class="demo-layout-1">
<label>
<!-- Switch only the public empty-value configuration. -->
<span>清空约定</span>
<AsamSelect v-model="mode">
<AsamOption value="zero" :label="'0 为空'">0 为空</AsamOption>
<AsamOption value="false" :label="'false 为空'">false 为空</AsamOption>
<AsamOption value="factory" :label="'函数返回 0'">函数返回 0</AsamOption>
<AsamOption value="factory-false" :label="'函数返回 false'"
>函数返回 false</AsamOption
>
<AsamOption value="factory-undefined" :label="'函数返回 undefined'"
>函数返回 undefined</AsamOption
>
<AsamOption value="factory-array" :label="'函数返回空数组端点'"
>函数返回空数组端点</AsamOption
>
<AsamOption value="epoch" :label="'0 为有效时间戳'">0 为有效时间戳</AsamOption>
</AsamSelect></label
>
<AsamDateTimeRangePicker
:key="mode"
v-model="value"
v-bind="configuration"
@clear="onClear"
@change="changes++"
/>
<AsamButton type="default" native-type="button" @click="restore">回填两端</AsamButton>
<AsamButton type="default" native-type="button" @click="observedCalls = factoryCalls"
>读取工厂调用次数</AsamButton
><output>{{ summary }}</output>
</section>
</template>
<script lang="ts" setup>
import { ref, computed, watch } from 'vue';
import { AsamSelect, AsamOption, AsamButton, AsamDateTimeRangePicker } from '@asam-ui/ui';
import type { DateTimeRangeValue, AsamDateTimeRangePickerProps } from '@asam-ui/ui';
defineOptions({ name: 'AsamDateTimeRangePickerEmptyValuesExample' });
const mode = ref('zero');
const value = ref<DateTimeRangeValue>(null);
const clears = ref(0);
const changes = ref(0);
const observedCalls = ref(0);
let factoryCalls = 0;
const summary = computed(
() =>
'模型 ' +
JSON.stringify(value.value) +
'；clear ' +
clears.value +
'；change ' +
changes.value +
'；工厂 ' +
observedCalls.value
);
function clearFactory() {
factoryCalls++;
return mode.value === 'factory-false'
? false
: mode.value === 'factory-undefined'
? undefined
: mode.value === 'factory-array'
? [null, null]
: 0;
}
function onClear() {
clears.value++;
observedCalls.value = factoryCalls;
}
const configuration = computed<AsamDateTimeRangePickerProps>(() => ({
valueFormat: mode.value === 'epoch' ? 'x' : 'YYYY-MM-DD HH:mm:ss',
emptyValues:
mode.value === 'epoch'
? ['', null, undefined]
: ['', null, undefined, 0, false, [null, null]],
valueOnClear:
mode.value === 'false'
? false
: mode.value.startsWith('factory')
? clearFactory
: mode.value === 'epoch'
? null
: 0
}));
function restore() {
value.value =
mode.value === 'epoch' ? [0, 86400000] : ['2026-01-12 09:30:00', '2026-01-14 17:30:00'];
}
watch(mode, restore);
restore();
</script>
<style scoped>
.demo-layout-1 {
display: grid;
gap: var(--asam-space-md);
}
</style>vue
<template>
<section class="demo-layout-1">
<label>
<!-- Switch only the public empty-value configuration. -->
<span>清空约定</span>
<AsamSelect v-model="mode">
<AsamOption value="zero" :label="'0 为空'">0 为空</AsamOption>
<AsamOption value="false" :label="'false 为空'">false 为空</AsamOption>
<AsamOption value="factory" :label="'函数返回 0'">函数返回 0</AsamOption>
<AsamOption value="factory-false" :label="'函数返回 false'"
>函数返回 false</AsamOption
>
<AsamOption value="factory-undefined" :label="'函数返回 undefined'"
>函数返回 undefined</AsamOption
>
<AsamOption value="factory-array" :label="'函数返回空数组端点'"
>函数返回空数组端点</AsamOption
>
<AsamOption value="epoch" :label="'0 为有效时间戳'">0 为有效时间戳</AsamOption>
</AsamSelect></label
>
<AsamDateTimeRangePicker
:key="mode"
v-model="value"
v-bind="configuration"
@clear="onClear"
@change="changes++"
/>
<AsamButton type="default" native-type="button" @click="restore">回填两端</AsamButton>
<AsamButton type="default" native-type="button" @click="observedCalls = factoryCalls"
>读取工厂调用次数</AsamButton
><output>{{ summary }}</output>
</section>
</template>
<script setup>
import { ref, computed, watch } from 'vue';
import { AsamSelect, AsamOption, AsamButton, AsamDateTimeRangePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDateTimeRangePickerEmptyValuesExample' });
const mode = ref('zero');
const value = ref(null);
const clears = ref(0);
const changes = ref(0);
const observedCalls = ref(0);
let factoryCalls = 0;
const summary = computed(
() =>
'模型 ' +
JSON.stringify(value.value) +
'；clear ' +
clears.value +
'；change ' +
changes.value +
'；工厂 ' +
observedCalls.value
);
function clearFactory() {
factoryCalls++;
return mode.value === 'factory-false'
? false
: mode.value === 'factory-undefined'
? undefined
: mode.value === 'factory-array'
? [null, null]
: 0;
}
function onClear() {
clears.value++;
observedCalls.value = factoryCalls;
}
const configuration = computed(() => ({
valueFormat: mode.value === 'epoch' ? 'x' : 'YYYY-MM-DD HH:mm:ss',
emptyValues:
mode.value === 'epoch'
? ['', null, undefined]
: ['', null, undefined, 0, false, [null, null]],
valueOnClear:
mode.value === 'false'
? false
: mode.value.startsWith('factory')
? clearFactory
: mode.value === 'epoch'
? null
: 0
}));
function restore() {
value.value =
mode.value === 'epoch' ? [0, 86400000] : ['2026-01-12 09:30:00', '2026-01-14 17:30:00'];
}
watch(mode, restore);
restore();
</script>
<style scoped>
.demo-layout-1 {
display: grid;
gap: var(--asam-space-md);
}
</style>实际清空包括 false、undefined 工厂和空数组工厂；即使原生对清空数组先做格式转换，两个端点仍输出完整组合的 null。 完整说明。
弹层 ClassValue 与组合两端
popperClass 支持字符串、对象、嵌套数组与 false/null/undefined。对象中 false 的键不生效；修改类名时已打开弹层同步更新，ASAM 四档尺寸类仍保留。两个独立端点分别承接同一配置。teleported=true 时弹层挂载到 body，自定义弹层样式需使用全局选择器。
完整 TS/JS 组合示例见 DatePicker 弹层类名，同时包含本入口与两端控件。
与基础值协议的边界
此入口保留高级完整范围/null 协议以及自己的 YYYY-MM-DD HH:mm:ss 存储默认值。 完整说明。
局部与全局浮层
基础示例使用默认的全局挂载；局部挂载示例展示显式配置的 teleported 或 appendTo。先打开控件浮层，再观察其所在容器。挂载位置与控件值、请求协议互相独立。
API
属性 AsamDateTimeRangePickerProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
ariaLabel | — | string | undefined | — |
id | 等价于原生 input id 属性 | (AsamDateTimeRangePickerProps)["id"] | — |
popperClass | DatePicker 下拉框的类名 | AsamDateTimeRangePickerProps["popperClass"] | undefined |
popperStyle | 弹出内容的自定义样式 | (AsamDateTimeRangePickerProps)["popperStyle"] | undefined |
fallbackPlacements | 提示浮层可采用的位置列表，参阅 Popper 的 fallbackPlacements。 | (AsamDateTimeRangePickerProps)["fallbackPlacements"] | ["bottom","top","right","left"] |
placement | 下拉框出现的位置 | enum"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"完整类型：(AsamDateTimeRangePickerProps)["placement"] | "bottom" |
popperOptions | 自定义浮层配置，参阅 Popper 文档。 | (AsamDateTimeRangePickerProps)["popperOptions"] | 工厂函数（每个实例创建） |
disabled | 禁用 | (AsamDateTimeRangePickerProps)["disabled"] | undefined |
tabindex | — | (AsamDateTimeRangePickerProps)["tabindex"] | 0 |
cellClassName | 设置自定义类名 | Function | undefined | — |
name | 原生属性 | (AsamDateTimeRangePickerProps)["name"] | — |
format | 显示在输入框中的格式 | string | undefined | "YYYY-MM-DD HH:mm" |
defaultValue | 可选，选择器打开时默认显示的时间 | (AsamDateTimeRangePickerProps)["defaultValue"] | — |
editable | 文本框可输入 | (AsamDateTimeRangePickerProps)["editable"] | true |
emptyValues | 组件空值配置，参阅配置提供器的空值说明。 | unknown[] | undefined | — |
valueOnClear | 清空后的返回值，参阅配置提供器的空值说明。 | (AsamDateTimeRangePickerProps)["valueOnClear"] | undefined |
validateEvent | 是否触发表单验证 | (AsamDateTimeRangePickerProps)["validateEvent"] | true |
disabledDate | 一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。应该返回一个 Boolean 值。 | Function | undefined | — |
shortcuts | 设置快捷选项，需要传入数组对象 | unknown[] | undefined | 工厂函数（每个实例创建） |
arrowControl | — | boolean | undefined | false |
unlinkPanels | 在范围选择器里取消两个日期面板之间的联动 | boolean | undefined | false |
showNow | — | (AsamDateTimeRangePickerProps)["showNow"] | true |
showConfirm | 是否显示确定按钮 | (AsamDateTimeRangePickerProps)["showConfirm"] | true |
showFooter | dates、months、years 或 quarters 模式下是否显示底部。 | (AsamDateTimeRangePickerProps)["showFooter"] | true |
showWeekNumber | 显示周数(除周外) | boolean | undefined | false |
clearable | 是否显示清除按钮 | (AsamDateTimeRangePickerProps)["clearable"] | true |
disabledHours | — | (AsamDateTimeRangePickerProps)["disabledHours"] | — |
disabledMinutes | — | (AsamDateTimeRangePickerProps)["disabledMinutes"] | — |
disabledSeconds | — | (AsamDateTimeRangePickerProps)["disabledSeconds"] | — |
valueFormat | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | undefined | "YYYY-MM-DD HH:mm:ss" |
dateFormat | — | string | undefined | — |
timeFormat | — | string | undefined | — |
defaultTime | 范围选择时选中日期所使用的当日内具体时刻 | (AsamDateTimeRangePickerProps)["defaultTime"] | — |
automaticDropdown | 该属性决定在输入框获得焦点时日期选择面板是否弹出。（在 3.0 版本中，默认值将设置为 false） | (AsamDateTimeRangePickerProps)["automaticDropdown"] | true |
clearIcon | 自定义清除图标 | (AsamDateTimeRangePickerProps)["clearIcon"] | {"name":"CircleClose","__name":"circle-close"} |
saveOnBlur | — | (AsamDateTimeRangePickerProps)["saveOnBlur"] | true |
prefixIcon | 自定义前缀图标如果 type的值是TimeLikeType，那么就是 Clock，不然就是 Calendar | (AsamDateTimeRangePickerProps)["prefixIcon"] | "" |
readonly | 只读 | boolean | undefined | false |
placeholder | 非范围选择时的占位内容 | string | undefined | "" |
rangeSeparator | 选择范围时的分隔符 | string | undefined | "至" |
startPlaceholder | 范围选择时开始日期的占位内容 | string | undefined | undefined |
endPlaceholder | 范围选择时结束日期的占位内容 | string | undefined | undefined |
size | — | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | undefined |
modelValue | — | (AsamDateTimeRangePickerProps)["modelValue"] | null |
teleported | 作用于两个独立日期时间浮层；原生单面板范围请使用 AsamDatePicker。 | boolean | undefined | true |
事件 AsamDateTimeRangePickerEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
update:modelValue | — | (AsamDateTimeRangePickerEmits)["update:modelValue"] | — |
change | — | (AsamDateTimeRangePickerEmits)["change"] | — |
clear | — | (AsamDateTimeRangePickerEmits)["clear"] | — |
focus | — | [event: FocusEvent] | — |
blur | — | [event: FocusEvent] | — |
keydown | — | [event: KeyboardEvent] | — |
visible-change | — | [visible: boolean, endpoint: AsamDateTimeEndpoint] | — |
panel-change | — | [value: Date | [Date, Date], mode: "year" | "month", view: string | undefined, endpoint: AsamDateTimeEndpoint] | — |
插槽 AsamDateTimeRangePickerSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | 原生日期单元格内容，包含起始或结束端点。 | (AsamDateTimeRangePickerSlots)["default"] | — |
sidebar | 两个独立日期时间浮层分别提供原生侧栏类名和端点。 | ((scope: { class: string; endpoint: AsamDateTimeEndpoint; }) => unknown) | undefined | — |
range-separator | 起始与结束输入框之间的内容。 | (() => unknown) | undefined | — |
prev-month | 各日期时间浮层的上个月导航内容。 | (() => unknown) | undefined | — |
next-month | 各日期时间浮层的下个月导航内容。 | (() => unknown) | undefined | — |
prev-year | 各日期时间浮层的上一年导航内容。 | (() => unknown) | undefined | — |
next-year | 各日期时间浮层的下一年导航内容。 | (() => unknown) | undefined | — |
实例方法与状态 AsamDateTimeRangePickerExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
startRef | — | AsamDatePickerExpose | undefined | — |
endRef | — | AsamDatePickerExpose | undefined | — |
focus | — | (endpoint?: AsamDateTimeEndpoint) => void | — |
blur | — | (endpoint?: AsamDateTimeEndpoint) => void | — |
handleOpen | — | (endpoint?: AsamDateTimeEndpoint) => void | — |
handleClose | — | (endpoint?: AsamDateTimeEndpoint) => void | — |
用法与契约补充说明
ASAM 扩展与迁移
本入口有两个独立 datetime 弹层。singlePanel 和 isRange 不属于此组合的公开契约；需要真正的单面板日期时间范围，使用 AsamDatePicker type="datetimerange" single-panel。teleported 同时控制两个端点；name 和 id 的双元素数组分别传给开始/结束输入，字符串 id 的结束端附加 -end。输入和弹层 attrs（例如 tabindex、data 属性）传给两个端点，class/style 留在组合容器。清空一个端点将模型置为 null，并发出一次 clear 和一次 change(null)；首次只选一个非空端点不发出部分范围。
本地化与高级配置
日期语言和控件文字是两份配置：本例的 locale.ts / locale.js 同时注册 Day.js 的 zh-cn 日期 locale，中文每周从周一开始，英文从周日开始。应用需显式安装 dayjs，并保证组件与应用消费同一实例；只切换 Provider 字典不会改变周首日。日期 locale 注册不切换应用的全局默认语言。
公开面板侧栏
sidebar 收到原生 class: string，把它绑定到侧栏根节点可保留布局。两个独立 datetime 弹层还提供 endpoint: start | end；旧 DateTimePicker 名称完整转发该上下文。 示例保留单元格、导航、范围分隔符插槽；输入弹层可以切换 teleported，本体 Panel 就地渲染。
配置空值与零时间戳
两个端点使用相同的原生 emptyValues（包括 Provider 继承）和合法 valueOnClear / 函数返回值。配置空值统一收敛为组合的 null，发出一次 update:modelValue(null)、clear、change(null)；不会把 0 或 false 清空值放入不完整范围。仅在配置明确把 0 定义为空时归一；默认空值约定中的 epoch 0 仍是合法非空日期。示例可回填后清空任一端点，切换到时间戳模式核对零值边界。
配置空值与零时间戳
实际清空包括 false、undefined 工厂和空数组工厂；即使原生对清空数组先做格式转换，两个端点仍输出完整组合的 null。Props 的 emptyValues 覆盖 Provider，未显式设置则继承；ASAM 比较空值只读取生效列表，不再次求值清空工厂。示例的计数器保持非响应式，以免改变原生工厂的计算依赖。
与基础值协议的边界
此入口保留高级完整范围/null 协议以及自己的 YYYY-MM-DD HH:mm:ss 存储默认值。原生基础 DatePicker/TimePicker/TimeSelect/Panel 不再将清空值统一为 null；需要沿用本组合协议时使用本入口，不把高级清空适配移回基础包装。两个端点的 nullable 清空适配只在本高级入口应用，合法空数组或 false/undefined 工厂仍收敛为组合 null。单点日期时间使用 AsamDatePicker type="datetime"，需要字符串模型时显式配置 valueFormat。
关联组件
参数与事件补充说明
参数与事件说明
ariaLabel
必填：否；声明来源：上游声明。
id
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
popperClass
必填：否；声明来源：上游声明。
popperClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
popperStyle
必填：否；声明来源：上游声明。
popperStyle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
fallbackPlacements
必填：否；声明来源：上游声明。
默认值与来源
["bottom","top","right","left"]（已安装运行时；已安装组件）固定上游文档默认：['bottom', 'top', 'right', 'left']（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
placement
必填：否；声明来源：上游声明。
placement 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："auto" / "auto-start" / "auto-end" / "top" / "bottom" / "right" / "left" / "top-start" / "top-end" / "bottom-start" / "bottom-end" / "right-start" / "right-end" / "left-start" / "left-end"
默认值与来源
"bottom"（已安装运行时；已安装组件）固定上游文档默认：bottom（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
popperOptions
必填：否；声明来源：上游声明。
popperOptions 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
popperOptions.placement:PublicMember<NonNullable<(AsamDateTimeRangePickerProps)["popperOptions"]>, "placement">— 依赖声明枚举：
"auto"/"auto-start"/"auto-end"/"top"/"bottom"/"right"/"left"/"top-start"/"top-end"/"bottom-start"/"bottom-end"/"right-start"/"right-end"/"left-start"/"left-end"popperOptions.modifiers:PublicMember<NonNullable<(AsamDateTimeRangePickerProps)["popperOptions"]>, "modifiers">— 依赖声明popperOptions.strategy:PublicMember<NonNullable<(AsamDateTimeRangePickerProps)["popperOptions"]>, "strategy">— 依赖声明枚举：
"fixed"/"absolute"popperOptions.onFirstUpdate:PublicMember<NonNullable<(AsamDateTimeRangePickerProps)["popperOptions"]>, "onFirstUpdate">— 依赖声明事件参数：
(arg0: Parameters<Extract<NonNullable<PublicMember<NonNullable<(AsamDateTimeRangePickerProps)["popperOptions"]>, "onFirstUpdate">>, (...args: never[]) => unknown>>[0]): void
默认值与来源
工厂函数（每个实例创建）（实例工厂；已安装组件）固定上游文档默认：{}（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
disabled
必填：否；声明来源：上游声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
tabindex
必填：否；声明来源：上游声明。
默认值与来源
0（已安装运行时；已安装组件）cellClassName
必填：否；声明来源：上游声明。
cellClassName 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
cellClassName.apply:(this: Function, thisArg: any, argArray?: any) => any— 依赖声明调用函数，以指定对象作为 this，并使用指定数组作为函数参数。
事件参数：
(this: Function, thisArg: any, argArray?: any): any嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
cellClassName.call:(this: Function, thisArg: any, ...argArray: any[]) => any— 依赖声明调用对象方法，并以另一个对象作为当前 this。
事件参数：
(this: Function, thisArg: any, ...argArray: any[]): any嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
cellClassName.bind:(this: Function, thisArg: any, ...argArray: any[]) => any— 依赖声明创建具有相同函数体的绑定函数，将 this 绑定到指定对象，并设置初始参数。
事件参数：
(this: Function, thisArg: any, ...argArray: any[]): any嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
cellClassName.toString:() => string— 依赖声明返回函数的字符串表示。
事件参数：
(): string嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
cellClassName.prototype:any— 依赖声明cellClassName.length:number— 依赖声明cellClassName.arguments:any— 依赖声明cellClassName.caller:Function— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
cellClassName.name:string— 依赖声明返回函数名称；函数名称只读，不能修改。
cellClassName.__@hasInstance@8888:(value: any) => boolean— 依赖声明当函数用作构造函数时，判断指定值是否继承自该函数；构造函数可以覆盖此方法，控制 instanceof 对实例的识别。
事件参数：
(value: any): boolean嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
name
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
format
必填：否；声明来源：上游声明。
默认值与来源
"YYYY-MM-DD HH:mm"（已安装运行时；已安装组件）固定上游文档默认：YYYY-MM-DD（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
defaultValue
必填：否；声明来源：上游声明。
defaultValue 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
editable
必填：否；声明来源：上游声明。
editable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
emptyValues
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
valueOnClear
必填：否；声明来源：上游声明。
valueOnClear 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
valueOnClear.apply:(this: Function, thisArg: any, argArray?: any) => any— 依赖声明调用函数，以指定对象作为 this，并使用指定数组作为函数参数。
事件参数：
(this: Function, thisArg: any, argArray?: any): any嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.call:(this: Function, thisArg: any, ...argArray: any[]) => any— 依赖声明调用对象方法，并以另一个对象作为当前 this。
事件参数：
(this: Function, thisArg: any, ...argArray: any[]): any嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.bind:(this: Function, thisArg: any, ...argArray: any[]) => any— 依赖声明创建具有相同函数体的绑定函数，将 this 绑定到指定对象，并设置初始参数。
事件参数：
(this: Function, thisArg: any, ...argArray: any[]): any嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.toString:() => string— 依赖声明返回函数的字符串表示。
事件参数：
(): string嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.prototype:any— 依赖声明valueOnClear.length:number— 依赖声明valueOnClear.arguments:any— 依赖声明valueOnClear.caller:Function— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.name:string— 依赖声明返回函数名称；函数名称只读，不能修改。
valueOnClear.__@hasInstance@8888:(value: any) => boolean— 依赖声明当函数用作构造函数时，判断指定值是否继承自该函数；构造函数可以覆盖此方法，控制 instanceof 对实例的识别。
事件参数：
(value: any): boolean嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
validateEvent
必填：否；声明来源：上游声明。
validateEvent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
disabledDate
必填：否；声明来源：上游声明。
disabledDate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
disabledDate.apply:(this: Function, thisArg: any, argArray?: any) => any— 依赖声明调用函数，以指定对象作为 this，并使用指定数组作为函数参数。
事件参数：
(this: Function, thisArg: any, argArray?: any): any嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
disabledDate.call:(this: Function, thisArg: any, ...argArray: any[]) => any— 依赖声明调用对象方法，并以另一个对象作为当前 this。
事件参数：
(this: Function, thisArg: any, ...argArray: any[]): any嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
disabledDate.bind:(this: Function, thisArg: any, ...argArray: any[]) => any— 依赖声明创建具有相同函数体的绑定函数，将 this 绑定到指定对象，并设置初始参数。
事件参数：
(this: Function, thisArg: any, ...argArray: any[]): any嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
disabledDate.toString:() => string— 依赖声明返回函数的字符串表示。
事件参数：
(): string嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
disabledDate.prototype:any— 依赖声明disabledDate.length:number— 依赖声明disabledDate.arguments:any— 依赖声明disabledDate.caller:Function— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
disabledDate.name:string— 依赖声明返回函数名称；函数名称只读，不能修改。
disabledDate.__@hasInstance@8888:(value: any) => boolean— 依赖声明当函数用作构造函数时，判断指定值是否继承自该函数；构造函数可以覆盖此方法，控制 instanceof 对实例的识别。
事件参数：
(value: any): boolean嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
shortcuts
必填：否；声明来源：上游声明。
默认值与来源
工厂函数（每个实例创建）（实例工厂；已安装组件）固定上游文档默认：[]（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
arrowControl
必填：否；声明来源：上游声明。
arrowControl 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）unlinkPanels
必填：否；声明来源：上游声明。
unlinkPanels 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
showNow
必填：否；声明来源：上游声明。
showNow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）showConfirm
必填：否；声明来源：上游声明。
showConfirm 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
showFooter
必填：否；声明来源：上游声明。
showFooter 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
showWeekNumber
必填：否；声明来源：上游声明。
showWeekNumber 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
clearable
必填：否；声明来源：上游声明。
clearable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
disabledHours
必填：否；声明来源：上游声明。
disabledHours 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(role: string, comparingDate?: Parameters<Extract<NonNullable<(AsamDateTimeRangePickerProps)["disabledHours"]>, (...args: never[]) => unknown>>[1]): number[]
disabledMinutes
必填：否；声明来源：上游声明。
disabledMinutes 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(hour: number, role: string, comparingDate?: Parameters<Extract<NonNullable<(AsamDateTimeRangePickerProps)["disabledMinutes"]>, (...args: never[]) => unknown>>[2]): number[]
disabledSeconds
必填：否；声明来源：上游声明。
disabledSeconds 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(hour: number, minute: number, role: string, comparingDate?: Parameters<Extract<NonNullable<(AsamDateTimeRangePickerProps)["disabledSeconds"]>, (...args: never[]) => unknown>>[3]): number[]
valueFormat
必填：否；声明来源：上游声明。
默认值与来源
"YYYY-MM-DD HH:mm:ss"（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
dateFormat
必填：否；声明来源：上游声明。
timeFormat
必填：否；声明来源：上游声明。
defaultTime
必填：否；声明来源：上游声明。
defaultTime 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
automaticDropdown
必填：否；声明来源：上游声明。
automaticDropdown 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
clearIcon
必填：否；声明来源：上游声明。
clearIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamDateTimeRangePickerProps)["clearIcon"]>, (...args: never[]) => unknown>>[1]): any
clearIcon.__isFragment:undefined— 依赖声明clearIcon.__isTeleport:undefined— 依赖声明clearIcon.__isSuspense:undefined— 依赖声明
默认值与来源
{"name":"CircleClose","__name":"circle-close"}（已安装运行时；已安装组件）固定上游文档默认：`CircleClose`（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
saveOnBlur
必填：否；声明来源：上游声明。
saveOnBlur 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）prefixIcon
必填：否；声明来源：上游声明。
prefixIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamDateTimeRangePickerProps)["prefixIcon"]>, (...args: never[]) => unknown>>[1]): any
prefixIcon.__isFragment:undefined— 依赖声明prefixIcon.__isTeleport:undefined— 依赖声明prefixIcon.__isSuspense:undefined— 依赖声明
默认值与来源
""（已安装运行时；已安装组件）固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
readonly
必填：否；声明来源：上游声明。
readonly 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
placeholder
必填：否；声明来源：上游声明。
默认值与来源
""（已安装运行时；已安装组件）固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
rangeSeparator
必填：否；声明来源：上游声明。
默认值与来源
"至"（已安装运行时；已安装组件）固定上游文档默认：'-'（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
startPlaceholder
必填：否；声明来源：上游声明。
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
endPlaceholder
必填：否；声明来源：上游声明。
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
默认值与来源
undefined（已安装运行时；已安装组件）modelValue
必填：否；声明来源：ASAM 声明。
默认值与来源
null（已安装运行时；已安装组件）teleported
必填：否；声明来源：ASAM 声明。
teleported 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）AsamDateTimeRangePickerProps 公开类型视图
ts
import type { Attrs } from 'vue';
import type { AsamDateTimeRangePickerProps, AsamControlSize } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamDateTimeRangePickerProps
type PublicContract = {
readonly "ariaLabel"?: string | undefined;
readonly "id"?: (AsamDateTimeRangePickerProps)["id"];
readonly "popperClass"?: AsamDateTimeRangePickerProps["popperClass"];
readonly "popperStyle"?: (AsamDateTimeRangePickerProps)["popperStyle"];
readonly "fallbackPlacements"?: (AsamDateTimeRangePickerProps)["fallbackPlacements"];
readonly "placement"?: (AsamDateTimeRangePickerProps)["placement"];
readonly "popperOptions"?: (AsamDateTimeRangePickerProps)["popperOptions"];
readonly "disabled"?: (AsamDateTimeRangePickerProps)["disabled"];
readonly "tabindex"?: (AsamDateTimeRangePickerProps)["tabindex"];
readonly "cellClassName"?: Function | undefined;
readonly "name"?: (AsamDateTimeRangePickerProps)["name"];
readonly "format"?: string | undefined;
readonly "defaultValue"?: (AsamDateTimeRangePickerProps)["defaultValue"];
readonly "editable"?: (AsamDateTimeRangePickerProps)["editable"];
readonly "emptyValues"?: unknown[] | undefined;
readonly "valueOnClear"?: (AsamDateTimeRangePickerProps)["valueOnClear"];
readonly "validateEvent"?: (AsamDateTimeRangePickerProps)["validateEvent"];
readonly "disabledDate"?: Function | undefined;
readonly "shortcuts"?: unknown[] | undefined;
readonly "arrowControl"?: boolean | undefined;
readonly "unlinkPanels"?: boolean | undefined;
readonly "showNow"?: (AsamDateTimeRangePickerProps)["showNow"];
readonly "showConfirm"?: (AsamDateTimeRangePickerProps)["showConfirm"];
readonly "showFooter"?: (AsamDateTimeRangePickerProps)["showFooter"];
readonly "showWeekNumber"?: boolean | undefined;
readonly "clearable"?: (AsamDateTimeRangePickerProps)["clearable"];
readonly "disabledHours"?: (AsamDateTimeRangePickerProps)["disabledHours"];
readonly "disabledMinutes"?: (AsamDateTimeRangePickerProps)["disabledMinutes"];
readonly "disabledSeconds"?: (AsamDateTimeRangePickerProps)["disabledSeconds"];
readonly "valueFormat"?: string | undefined;
readonly "dateFormat"?: string | undefined;
readonly "timeFormat"?: string | undefined;
readonly "defaultTime"?: (AsamDateTimeRangePickerProps)["defaultTime"];
readonly "automaticDropdown"?: (AsamDateTimeRangePickerProps)["automaticDropdown"];
readonly "clearIcon"?: (AsamDateTimeRangePickerProps)["clearIcon"];
readonly "saveOnBlur"?: (AsamDateTimeRangePickerProps)["saveOnBlur"];
readonly "prefixIcon"?: (AsamDateTimeRangePickerProps)["prefixIcon"];
readonly "readonly"?: boolean | undefined;
readonly "placeholder"?: string | undefined;
readonly "rangeSeparator"?: string | undefined;
readonly "startPlaceholder"?: string | undefined;
readonly "endPlaceholder"?: string | undefined;
"size"?: AsamControlSize | undefined;
readonly "modelValue"?: (AsamDateTimeRangePickerProps)["modelValue"];
"teleported"?: boolean | undefined;
};参数与事件说明
update:modelValue
必填：是；声明来源：ASAM 声明。
change
必填：是；声明来源：ASAM 声明。
clear
必填：是；声明来源：ASAM 声明。
focus
必填：是；声明来源：ASAM 声明。
blur
必填：是；声明来源：ASAM 声明。
keydown
必填：是；声明来源：ASAM 声明。
visible-change
必填：是；声明来源：ASAM 声明。
panel-change
必填：是；声明来源：ASAM 声明。
AsamDateTimeRangePickerEmits 公开类型视图
ts
import type { AsamDateTimeRangePickerEmits, AsamDateTimeEndpoint } from '@asam-ui/ui';
// AsamDateTimeRangePickerEmits
type PublicContract = {
"update:modelValue": (AsamDateTimeRangePickerEmits)["update:modelValue"];
"change": (AsamDateTimeRangePickerEmits)["change"];
"clear": (AsamDateTimeRangePickerEmits)["clear"];
"focus": [event: FocusEvent];
"blur": [event: FocusEvent];
"keydown": [event: KeyboardEvent];
"visible-change": [visible: boolean, endpoint: AsamDateTimeEndpoint];
"panel-change": [value: Date | [Date, Date], mode: "year" | "month", view: string | undefined, endpoint: AsamDateTimeEndpoint];
};参数与事件说明
default
必填：否；声明来源：ASAM 声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(cell: Parameters<Extract<NonNullable<(AsamDateTimeRangePickerSlots)["default"]>, (...args: never[]) => unknown>>[0]): unknown
sidebar
必填：否；声明来源：ASAM 声明。
sidebar 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: { class: string; endpoint: AsamDateTimeEndpoint; }): unknown
range-separator
必填：否；声明来源：ASAM 声明。
range-separator 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
prev-month
必填：否；声明来源：ASAM 声明。
prev-month 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
next-month
必填：否；声明来源：ASAM 声明。
next-month 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
prev-year
必填：否；声明来源：ASAM 声明。
prev-year 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
next-year
必填：否；声明来源：ASAM 声明。
next-year 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
AsamDateTimeRangePickerSlots 公开类型视图
ts
import type { AsamDateTimeRangePickerSlots, AsamDateTimeEndpoint } from '@asam-ui/ui';
// AsamDateTimeRangePickerSlots
type PublicContract = {
"default"?: (AsamDateTimeRangePickerSlots)["default"];
"sidebar"?: ((scope: { class: string; endpoint: AsamDateTimeEndpoint; }) => unknown) | undefined;
"range-separator"?: (() => unknown) | undefined;
"prev-month"?: (() => unknown) | undefined;
"next-month"?: (() => unknown) | undefined;
"prev-year"?: (() => unknown) | undefined;
"next-year"?: (() => unknown) | undefined;
};参数与事件说明
startRef
必填：是；声明来源：ASAM 声明。
startRef 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
startRef.focus:() => void— 上游声明事件参数：
(): voidstartRef.handleClose:() => void— 上游声明事件参数：
(): voidstartRef.blur:() => void— 上游声明事件参数：
(): voidstartRef.handleOpen:() => void— 上游声明事件参数：
(): void
endRef
必填：是；声明来源：ASAM 声明。
endRef 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
endRef.focus:() => void— 上游声明事件参数：
(): voidendRef.handleClose:() => void— 上游声明事件参数：
(): voidendRef.blur:() => void— 上游声明事件参数：
(): voidendRef.handleOpen:() => void— 上游声明事件参数：
(): void
focus
必填：是；声明来源：ASAM 声明。
focus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(endpoint?: AsamDateTimeEndpoint | undefined): void
blur
必填：是；声明来源：ASAM 声明。
blur 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(endpoint?: AsamDateTimeEndpoint | undefined): void
handleOpen
必填：是；声明来源：ASAM 声明。
handleOpen 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(endpoint?: AsamDateTimeEndpoint | undefined): void
handleClose
必填：是；声明来源：ASAM 声明。
handleClose 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(endpoint?: AsamDateTimeEndpoint | undefined): void
AsamDateTimeRangePickerExpose 公开类型视图
ts
import type { AsamDateTimeRangePickerExpose, AsamDatePickerExpose, AsamDateTimeEndpoint } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamDateTimeRangePickerExpose
type PublicContract = {
readonly "startRef": AsamDatePickerExpose | undefined;
readonly "endRef": AsamDatePickerExpose | undefined;
"focus": (endpoint?: AsamDateTimeEndpoint) => void;
"blur": (endpoint?: AsamDateTimeEndpoint) => void;
"handleOpen": (endpoint?: AsamDateTimeEndpoint) => void;
"handleClose": (endpoint?: AsamDateTimeEndpoint) => void;
};