使用场景
通过输入框与弹层编辑时间。 未设置 valueFormat 时保持原生 Date 模型；需要字符串或时间戳时显式配置 valueFormat。format 控制展示，valueFormat 控制模型文本或时间戳。
原生默认模型
未设置行为属性时由原生控件解析默认值。以下完整 SFC 对照显式 undefined、null 和空字符串；输出保留原始模型类型，不把清空值统一为 null。固定原生版本的非法输入诊断与兼容限制仍按原生处理。
原生默认模型
vue
<template>
<section class="native-values-example">
<p class="example-paragraph">使用原生模型和默认值；日期/时间未传 valueFormat，选择后保持 Date。</p>
<AsamTimePicker v-model="value" clearable @update:model-value="updates++" />
<AsamButton type="default" native-type="button" @click="value = undefined"
>显式 undefined</AsamButton
>
<AsamButton type="default" native-type="button" @click="value = null">显式 null</AsamButton>
<AsamButton type="default" native-type="button" @click="value = ''"
>显式空字符串</AsamButton
>
<output>{{ summary }}；更新次数 {{ updates }}</output>
</section>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue';
import { AsamButton, AsamTimePicker } from '@asam-ui/ui';
import type { AsamTimeValue } from '@asam-ui/ui';
defineOptions({ name: 'AsamTimePickerNativeValuesExample' });
const value = ref<AsamTimeValue>();
const updates = ref(0);
const summary = computed(() =>
value.value === undefined
? 'undefined'
: value.value instanceof Date
? 'Date ' + value.value.toISOString()
: JSON.stringify(value.value)
);
</script>
<style scoped>
.native-values-example {
display: grid;
gap: var(--asam-space-md);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<template>
<section class="native-values-example">
<p class="example-paragraph">使用原生模型和默认值；日期/时间未传 valueFormat，选择后保持 Date。</p>
<AsamTimePicker v-model="value" clearable @update:model-value="updates++" />
<AsamButton type="default" native-type="button" @click="value = undefined"
>显式 undefined</AsamButton
>
<AsamButton type="default" native-type="button" @click="value = null">显式 null</AsamButton>
<AsamButton type="default" native-type="button" @click="value = ''"
>显式空字符串</AsamButton
>
<output>{{ summary }}；更新次数 {{ updates }}</output>
</section>
</template>
<script setup>
import { computed, ref } from 'vue';
import { AsamButton, AsamTimePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamTimePickerNativeValuesExample' });
const value = ref();
const updates = ref(0);
const summary = computed(() =>
value.value === undefined
? 'undefined'
: value.value instanceof Date
? 'Date ' + value.value.toISOString()
: JSON.stringify(value.value)
);
</script>
<style scoped>
.native-values-example {
display: grid;
gap: var(--asam-space-md);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>格式、清空与禁用
模型初始为空；选择后显示当前值。disabled 由调用方切换，clear 的行为与 update:modelValue 分开。
格式、清空与禁用
vue
<template>
<div class="example">
<AsamTimePicker
v-model="value"
v-bind="{
'value-format': 'HH:mm:ss',
format: 'HH:mm:ss',
clearable: true,
'aria-label': '选择时间'
}"
:disabled="disabled"
/>
<AsamButton type="default" @click="disabled = !disabled"> 切换禁用 </AsamButton>
<output>模型：{{ value }}；禁用：{{ disabled }}</output>
</div>
</template>
<script lang="ts" setup>
import type { AsamTimeValue } from '@asam-ui/ui';
defineOptions({ name: 'AsamTimePickerBasicExample' });
import { ref } from 'vue';
import { AsamTimePicker, AsamButton } from '@asam-ui/ui';
const value = ref<AsamTimeValue>(null);
const disabled = ref(false);
</script>
<style scoped>
.example {
display: grid;
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;
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">
<AsamTimePicker
v-model="value"
v-bind="{
'value-format': 'HH:mm:ss',
format: 'HH:mm:ss',
clearable: true,
'aria-label': '选择时间'
}"
:disabled="disabled"
/>
<AsamButton type="default" @click="disabled = !disabled"> 切换禁用 </AsamButton>
<output>模型：{{ value }}；禁用：{{ disabled }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamTimePickerBasicExample' });
import { ref } from 'vue';
import { AsamTimePicker, AsamButton } from '@asam-ui/ui';
const value = ref(null);
const disabled = ref(false);
</script>
<style scoped>
.example {
display: grid;
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;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>范围与约束
isRange 开启起止时间，disabledHours 禁用指定小时。范围选择提交两个端点组成的数组；清空值与事件载荷保持原生结果。
范围与约束
vue
<template>
<div class="example">
<AsamTimePicker
v-model="range"
v-bind="{ 'is-range': true, 'value-format': 'HH:mm:ss' }"
:disabled-hours="disabledHours"
/>
<output>范围：{{ range }}</output>
</div>
</template>
<script lang="ts" setup>
import type { AsamTimeValue } from '@asam-ui/ui';
defineOptions({ name: 'AsamTimePickerRangeExample' });
import { ref } from 'vue';
import { AsamTimePicker } from '@asam-ui/ui';
const range = ref<AsamTimeValue>(null);
function disabledHours() {
return [0, 1, 2, 3, 4, 5];
}
</script>
<style scoped>
.example {
display: grid;
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;
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">
<AsamTimePicker
v-model="range"
v-bind="{ 'is-range': true, 'value-format': 'HH:mm:ss' }"
:disabled-hours="disabledHours"
/>
<output>范围：{{ range }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamTimePickerRangeExample' });
import { ref } from 'vue';
import { AsamTimePicker } from '@asam-ui/ui';
const range = ref(null);
function disabledHours() {
return [0, 1, 2, 3, 4, 5];
}
</script>
<style scoped>
.example {
display: grid;
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;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>公开实例操作
focus/blur 访问输入；handleOpen/handleClose 打开和关闭选择弹层。
公开实例操作
vue
<template>
<div class="example">
<AsamTimePicker
ref="control"
v-bind="{ 'value-format': 'HH:mm:ss', format: 'HH:mm:ss' }"
v-model="value"
/>
<div class="row">
<AsamButton type="default" @click="control?.focus()"> 聚焦 </AsamButton>
<AsamButton type="default" @click="control?.blur()"> 失焦 </AsamButton>
<AsamButton type="default" @click="control?.handleOpen()"> 打开 </AsamButton>
<AsamButton type="default" @click="control?.handleClose()"> 关闭 </AsamButton>
</div>
</div>
</template>
<script lang="ts" setup>
import type { AsamTimeValue } from '@asam-ui/ui';
defineOptions({ name: 'AsamTimePickerInstanceExample' });
import { ref } from 'vue';
import { AsamTimePicker, AsamButton } from '@asam-ui/ui';
import type { AsamTimePickerExpose } from '@asam-ui/ui';
const control = ref<AsamTimePickerExpose>();
const value = ref<AsamTimeValue>(null);
</script>
<style scoped>
.example {
display: grid;
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;
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">
<AsamTimePicker
ref="control"
v-bind="{ 'value-format': 'HH:mm:ss', format: 'HH:mm:ss' }"
v-model="value"
/>
<div class="row">
<AsamButton type="default" @click="control?.focus()"> 聚焦 </AsamButton>
<AsamButton type="default" @click="control?.blur()"> 失焦 </AsamButton>
<AsamButton type="default" @click="control?.handleOpen()"> 打开 </AsamButton>
<AsamButton type="default" @click="control?.handleClose()"> 关闭 </AsamButton>
</div>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamTimePickerInstanceExample' });
import { ref } from 'vue';
import { AsamTimePicker, AsamButton } from '@asam-ui/ui';
const control = ref();
const value = ref(null);
</script>
<style scoped>
.example {
display: grid;
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;
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>
<AsamTimePicker size="large" value-format="HH:mm:ss" format="HH:mm:ss" />
</section>
<section>
<strong> big </strong>
<AsamTimePicker size="big" value-format="HH:mm:ss" format="HH:mm:ss" />
</section>
<section>
<strong> default </strong>
<AsamTimePicker size="default" value-format="HH:mm:ss" format="HH:mm:ss" />
</section>
<section>
<strong> small </strong>
<AsamTimePicker size="small" value-format="HH:mm:ss" format="HH:mm:ss" />
</section>
</div>
<AsamConfigProvider :size="density">
<section>
<AsamTimePicker value-format="HH:mm:ss" format="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: 'AsamTimePickerSizesExample' });
import { ref } from 'vue';
import { AsamTimePicker, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
const density = ref<AsamControlSize>('big');
</script>
<style scoped>
.example {
display: grid;
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;
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>
<AsamTimePicker size="large" value-format="HH:mm:ss" format="HH:mm:ss" />
</section>
<section>
<strong> big </strong>
<AsamTimePicker size="big" value-format="HH:mm:ss" format="HH:mm:ss" />
</section>
<section>
<strong> default </strong>
<AsamTimePicker size="default" value-format="HH:mm:ss" format="HH:mm:ss" />
</section>
<section>
<strong> small </strong>
<AsamTimePicker size="small" value-format="HH:mm:ss" format="HH:mm:ss" />
</section>
</div>
<AsamConfigProvider :size="density">
<section>
<AsamTimePicker value-format="HH:mm:ss" format="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: 'AsamTimePickerSizesExample' });
import { ref } from 'vue';
import { AsamTimePicker, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
const density = ref('big');
</script>
<style scoped>
.example {
display: grid;
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;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>ASAM 扩展与迁移
disabledHours、disabledMinutes、disabledSeconds 可随状态动态变化，范围回调会收到 start/end 的 role 以及比较端点。 完整说明。
ASAM 四档 size 与表单、ConfigProvider 继承一致。 完整说明。
API 阅读方式
API 按公开类型与运行默认值生成；未知默认值不等于 false 或空值。 完整说明。
下方 Props、Events、Slots、Exposes 按当前实际公开类型与运行默认值生成。组合属性按分支生效，不能任意混搭值模式。标为“未知 / 未声明”的默认值不代表 false 或空值。源码区域提供对应语言的独立 Demo.vue，可直接复制或下载；本地辅助组件、数据和素材已内联到当前文件。
固定 2.14.7 完整用法
下面以 ASAM 公开组件和图标入口承接固定 2.14.7 完整用途，保留 TS/JS 完整示例。基础入口使用原生默认值，未指定 valueFormat 的日期/时间选择保持 Date 模型。
基础用法
基础用法
vue
<template>
<div class="example-basic demo-layout-1">
<AsamTimePicker v-model="value1" value-format="" placeholder="任意时间" />
<AsamTimePicker v-model="value2" value-format="" arrow-control placeholder="任意时间" />
</div>
</template>
<script lang="ts" setup>
import type { AsamTimeValue } from '@asam-ui/ui';
import { AsamTimePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamTimePickerofficialtimepickerbasicExample' });
import { ref } from 'vue';
const value1 = ref<AsamTimeValue>();
const value2 = ref<AsamTimeValue>();
</script>
<style scoped>
/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */
.example-basic .el-date-editor {
margin: 8px;
}
</style>
<style scoped>
.demo-layout-1 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-md);
}
</style>vue
<template>
<div class="example-basic demo-layout-1">
<AsamTimePicker v-model="value1" value-format="" placeholder="任意时间" />
<AsamTimePicker v-model="value2" value-format="" arrow-control placeholder="任意时间" />
</div>
</template>
<script setup>
import { AsamTimePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamTimePickerofficialtimepickerbasicExample' });
import { ref } from 'vue';
const value1 = ref();
const value2 = ref();
</script>
<style scoped>
/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */
.example-basic .el-date-editor {
margin: 8px;
}
</style>
<style scoped>
.demo-layout-1 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-md);
}
</style>
基础时间范围
基础时间范围
vue
<template>
<div class="example-basic">
<AsamTimePicker
v-model="value1"
value-format=""
:disabled-hours="disabledHours"
:disabled-minutes="disabledMinutes"
:disabled-seconds="disabledSeconds"
placeholder="任意时间"
/>
</div>
</template>
<script lang="ts" setup>
import type { AsamTimeValue } from '@asam-ui/ui';
import { AsamTimePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamTimePickerofficialtimepickerbasicrangeExample' });
import { ref } from 'vue';
const value1 = ref<AsamTimeValue>(new Date(2016, 9, 10, 18, 30));
const makeRange = (start: number, end: number) => {
const result: number[] = [];
for (let i = start; i <= end; i++) {
result.push(i);
}
return result;
};
const disabledHours = () => {
return makeRange(0, 16).concat(makeRange(19, 23));
};
const disabledMinutes = (hour: number) => {
if (hour === 17) {
return makeRange(0, 29);
}
if (hour === 18) {
return makeRange(31, 59);
}
return [];
};
const disabledSeconds = (hour: number, minute: number) => {
if (hour === 18 && minute === 30) {
return makeRange(1, 59);
}
return [];
};
</script>
<style scoped>
/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */
.example-basic .el-date-editor {
margin: 8px;
}
</style>vue
<template>
<div class="example-basic">
<AsamTimePicker
v-model="value1"
value-format=""
:disabled-hours="disabledHours"
:disabled-minutes="disabledMinutes"
:disabled-seconds="disabledSeconds"
placeholder="任意时间"
/>
</div>
</template>
<script setup>
import { AsamTimePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamTimePickerofficialtimepickerbasicrangeExample' });
import { ref } from 'vue';
const value1 = ref(new Date(2016, 9, 10, 18, 30));
const makeRange = (start, end) => {
const result = [];
for (let i = start; i <= end; i++) {
result.push(i);
}
return result;
};
const disabledHours = () => {
return makeRange(0, 16).concat(makeRange(19, 23));
};
const disabledMinutes = (hour) => {
if (hour === 17) {
return makeRange(0, 29);
}
if (hour === 18) {
return makeRange(31, 59);
}
return [];
};
const disabledSeconds = (hour, minute) => {
if (hour === 18 && minute === 30) {
return makeRange(1, 59);
}
return [];
};
</script>
<style scoped>
/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */
.example-basic .el-date-editor {
margin: 8px;
}
</style>
指定范围
指定范围
vue
<template>
<div class="demo-range demo-layout-1">
<AsamTimePicker
v-model="value1"
value-format=""
is-range
range-separator="To"
start-placeholder="Start time"
end-placeholder="End time"
/>
<AsamTimePicker
v-model="value2"
value-format=""
is-range
arrow-control
range-separator="To"
start-placeholder="Start time"
end-placeholder="End time"
/>
</div>
</template>
<script lang="ts" setup>
import type { AsamTimeValue } from '@asam-ui/ui';
import { AsamTimePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamTimePickerofficialtimepickerrangeExample' });
import { ref } from 'vue';
const value1 = ref<AsamTimeValue>([new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]);
const value2 = ref<AsamTimeValue>([new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]);
</script>
<style scoped>
/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */
.demo-range .el-date-editor {
margin: 8px;
}
.demo-range .el-range-separator {
box-sizing: content-box;
}
</style>
<style scoped>
.demo-layout-1 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-md);
}
</style>vue
<template>
<div class="demo-range demo-layout-1">
<AsamTimePicker
v-model="value1"
value-format=""
is-range
range-separator="To"
start-placeholder="Start time"
end-placeholder="End time"
/>
<AsamTimePicker
v-model="value2"
value-format=""
is-range
arrow-control
range-separator="To"
start-placeholder="Start time"
end-placeholder="End time"
/>
</div>
</template>
<script setup>
import { AsamTimePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamTimePickerofficialtimepickerrangeExample' });
import { ref } from 'vue';
const value1 = ref([new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]);
const value2 = ref([new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]);
</script>
<style scoped>
/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */
.demo-range .el-date-editor {
margin: 8px;
}
.demo-range .el-range-separator {
box-sizing: content-box;
}
</style>
<style scoped>
.demo-layout-1 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-md);
}
</style>禁用时分秒、箭头控制与范围角色
禁用时分秒、箭头控制与范围角色
vue
<template>
<section class="demo-layout-1">
<AsamTimePicker
v-model="value"
:arrow-control="arrows"
:disabled-hours="disabledHours"
:disabled-minutes="disabledMinutes"
:disabled-seconds="disabledSeconds"
:teleported="false"
format="HH:mm:ss"
value-format="HH:mm:ss"
@change="changes++"
@keydown="keys++"
/>
<AsamTimePicker
v-model="range"
is-range
value-format="HH:mm:ss"
:arrow-control="arrows"
:disabled-hours="disabledHours"
:disabled-minutes="disabledMinutes"
:disabled-seconds="disabledSeconds"
/>
<AsamButton native-type="submit" type="default" @click="arrows = !arrows"
>箭头 {{ arrows }}</AsamButton
>
<AsamButton native-type="submit" type="default" @click="limit = limit === 9 ? 13 : 9"
>动态最早小时 {{ limit }}</AsamButton
>
<output>{{ { value, range, changes, keys } }}</output>
</section>
</template>
<script lang="ts" setup>
import type { AsamTimeValue } from '@asam-ui/ui';
defineOptions({ name: 'AsamTimePickerconstraintsExample' });
import { ref } from 'vue';
import { AsamButton, AsamTimePicker } from '@asam-ui/ui';
const value = ref<AsamTimeValue>('09:30:10');
const range = ref<AsamTimeValue>(['09:30:10', '17:00:00']);
const arrows = ref(false);
const limit = ref(9);
const changes = ref(0);
const keys = ref(0);
const disabledHours = () => Array.from({ length: limit.value }, (_, index) => index);
const disabledMinutes = (hour: number) => (hour === limit.value ? [0, 1, 2] : []);
const disabledSeconds = (hour: number, minute: number) =>
hour === limit.value && minute === 30 ? [0, 1, 2] : [];
</script>
<style scoped>
.demo-layout-1 {
display: grid;
gap: var(--asam-space-md);
}
</style>vue
<template>
<section class="demo-layout-1">
<AsamTimePicker
v-model="value"
:arrow-control="arrows"
:disabled-hours="disabledHours"
:disabled-minutes="disabledMinutes"
:disabled-seconds="disabledSeconds"
:teleported="false"
format="HH:mm:ss"
value-format="HH:mm:ss"
@change="changes++"
@keydown="keys++"
/>
<AsamTimePicker
v-model="range"
is-range
value-format="HH:mm:ss"
:arrow-control="arrows"
:disabled-hours="disabledHours"
:disabled-minutes="disabledMinutes"
:disabled-seconds="disabledSeconds"
/>
<AsamButton native-type="submit" type="default" @click="arrows = !arrows"
>箭头 {{ arrows }}</AsamButton
>
<AsamButton native-type="submit" type="default" @click="limit = limit === 9 ? 13 : 9"
>动态最早小时 {{ limit }}</AsamButton
>
<output>{{ { value, range, changes, keys } }}</output>
</section>
</template>
<script setup>
defineOptions({ name: 'AsamTimePickerconstraintsExample' });
import { ref } from 'vue';
import { AsamButton, AsamTimePicker } from '@asam-ui/ui';
const value = ref('09:30:10');
const range = ref(['09:30:10', '17:00:00']);
const arrows = ref(false);
const limit = ref(9);
const changes = ref(0);
const keys = ref(0);
const disabledHours = () => Array.from({ length: limit.value }, (_, index) => index);
const disabledMinutes = (hour) => (hour === limit.value ? [0, 1, 2] : []);
const disabledSeconds = (hour, minute) => (hour === limit.value && minute === 30 ? [0, 1, 2] : []);
</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: 'AsamTimePickerAdvancedContractExample' },
__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 = {
isRange: true,
arrowControl: true,
ariaLabel: '时间范围',
valueFormat: 'HH:mm:ss',
format: '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),
saveOnBlur: false,
tabindex: 0,
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.AsamTimePicker), (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++))
}), null, 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-e27a9f76";
},
"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-e27a9f76] {
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: 'AsamTimePickerAdvancedContractExample' }, {
__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 = {
isRange: true,
arrowControl: true,
ariaLabel: '时间范围',
valueFormat: 'HH:mm:ss',
format: '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),
saveOnBlur: false,
tabindex: 0,
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.AsamTimePicker), (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++))
}), null, 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-f5970e6d";
},
"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-f5970e6d] {
display: grid;
gap: var(--asam-space-md);
}
</style>原生清空配置与迁移
基础入口仅委托原生公开 props、事件、slots、模型与 expose。未传属性与显式 undefined、null、false 均保持原生语义；不补入空值，不替换清空工厂，不将输出统一为 null。合法 0、false、undefined 或数组工厂输出及原生的事件顺序完整保留，工厂调用受原生校验与计算规则约束。
固定 2.14.7 对某些清空哨兵与格式组合可能产生空显示、格式化异常或诊断；这些属于原生兼容限制，基础包装不接管处理。 完整说明。
原生清空配置与 nullable 模型
vue
<template>
<section class="demo-layout-1">
<div>
<span>清空配置</span>
<AsamSelect v-model="mode" aria-label="清空配置">
<AsamOption value="default" :label="'默认'">默认</AsamOption>
<AsamOption value="false" :label="'false'">false</AsamOption>
<AsamOption value="factory-false" :label="'函数返回 false'"
>函数返回 false</AsamOption
>
<AsamOption value="undefined" :label="'函数返回 undefined'"
>函数返回 undefined</AsamOption
>
<AsamOption value="array" :label="'函数返回空数组端点'"
>函数返回空数组端点</AsamOption
>
<AsamOption value="zero" :label="'0 为空'">0 为空</AsamOption>
<AsamOption value="epoch" :label="'0 为有效时间戳'">0 为有效时间戳</AsamOption>
</AsamSelect>
</div>
<div>
<span>配置来源</span>
<AsamSelect v-model="scope" aria-label="配置来源">
<AsamOption value="props" :label="'属性'">属性</AsamOption>
<AsamOption value="provider" :label="'配置提供器'">配置提供器</AsamOption>
</AsamSelect>
</div>
<AsamCheckboxItem v-model="range">原生范围</AsamCheckboxItem>
<AsamConfigProvider v-bind="provider">
<AsamTimePicker
:key="scope + ':' + mode + ':' + range"
v-model="value"
v-bind="configuration"
@update:model-value="updates++"
@change="changes++"
@clear="onClear"
/>
</AsamConfigProvider>
<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 { computed, ref, watch } from 'vue';
import {
AsamSelect,
AsamOption,
AsamCheckboxItem,
AsamButton,
AsamTimePicker,
AsamConfigProvider
} from '@asam-ui/ui';
import type { AsamTimeValue, AsamTimePickerProps } from '@asam-ui/ui';
defineOptions({ name: 'AsamTimePickerEmptyValuesExample' });
const mode = ref('default');
const scope = ref('props');
const range = ref(false);
const value = ref<AsamTimeValue>(null);
const updates = ref(0);
const changes = ref(0);
const clears = ref(0);
const observedCalls = ref(0);
// Keep the callback counter non-reactive: reading/incrementing a ref inside a native
// computed factory would itself create a dependency and alter callback behavior.
let factoryCalls = 0;
const summary = computed(
() =>
'模型 ' +
JSON.stringify(value.value) +
'；update ' +
updates.value +
'；change ' +
changes.value +
'；clear ' +
clears.value +
'；工厂 ' +
observedCalls.value
);
function clearFactory() {
factoryCalls++;
return mode.value === 'factory-false'
? false
: mode.value === 'array'
? [null, null]
: undefined;
}
type EmptyConfiguration = Pick<AsamTimePickerProps, 'emptyValues' | 'valueOnClear'>;
const emptyConfiguration = computed<EmptyConfiguration>(() => ({
emptyValues:
mode.value === 'zero'
? ['', undefined, null, 0]
: ['', undefined, null, false, [null, null]],
valueOnClear: ['factory-false', 'undefined', 'array'].includes(mode.value)
? clearFactory
: mode.value === 'false'
? false
: mode.value === 'zero'
? 0
: null
}));
const provider = computed<EmptyConfiguration>(() =>
scope.value === 'provider' ? emptyConfiguration.value : {}
);
const configuration = computed<AsamTimePickerProps>(() => ({
isRange: range.value,
format: 'HH:mm:ss',
valueFormat: mode.value === 'epoch' || mode.value === 'zero' ? 'x' : 'HH:mm:ss',
...(scope.value === 'props' ? emptyConfiguration.value : {})
}));
function restore() {
value.value =
mode.value === 'zero'
? range.value
? [86400000, 172800000]
: 86400000
: mode.value === 'epoch'
? range.value
? [0, 86400000]
: 0
: range.value
? ['09:30:00', '17:30:00']
: '09:30:00';
}
function onClear() {
clears.value++;
observedCalls.value = factoryCalls;
}
watch([mode, scope, range], restore);
restore();
</script>
<style scoped>
.demo-layout-1 {
display: grid;
gap: var(--asam-space-md);
}
</style>vue
<template>
<section class="demo-layout-1">
<div>
<span>清空配置</span>
<AsamSelect v-model="mode" aria-label="清空配置">
<AsamOption value="default" :label="'默认'">默认</AsamOption>
<AsamOption value="false" :label="'false'">false</AsamOption>
<AsamOption value="factory-false" :label="'函数返回 false'"
>函数返回 false</AsamOption
>
<AsamOption value="undefined" :label="'函数返回 undefined'"
>函数返回 undefined</AsamOption
>
<AsamOption value="array" :label="'函数返回空数组端点'"
>函数返回空数组端点</AsamOption
>
<AsamOption value="zero" :label="'0 为空'">0 为空</AsamOption>
<AsamOption value="epoch" :label="'0 为有效时间戳'">0 为有效时间戳</AsamOption>
</AsamSelect>
</div>
<div>
<span>配置来源</span>
<AsamSelect v-model="scope" aria-label="配置来源">
<AsamOption value="props" :label="'属性'">属性</AsamOption>
<AsamOption value="provider" :label="'配置提供器'">配置提供器</AsamOption>
</AsamSelect>
</div>
<AsamCheckboxItem v-model="range">原生范围</AsamCheckboxItem>
<AsamConfigProvider v-bind="provider">
<AsamTimePicker
:key="scope + ':' + mode + ':' + range"
v-model="value"
v-bind="configuration"
@update:model-value="updates++"
@change="changes++"
@clear="onClear"
/>
</AsamConfigProvider>
<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 { computed, ref, watch } from 'vue';
import {
AsamSelect,
AsamOption,
AsamCheckboxItem,
AsamButton,
AsamTimePicker,
AsamConfigProvider
} from '@asam-ui/ui';
defineOptions({ name: 'AsamTimePickerEmptyValuesExample' });
const mode = ref('default');
const scope = ref('props');
const range = ref(false);
const value = ref(null);
const updates = ref(0);
const changes = ref(0);
const clears = ref(0);
const observedCalls = ref(0);
// Keep the callback counter non-reactive: reading/incrementing a ref inside a native
// computed factory would itself create a dependency and alter callback behavior.
let factoryCalls = 0;
const summary = computed(
() =>
'模型 ' +
JSON.stringify(value.value) +
'；update ' +
updates.value +
'；change ' +
changes.value +
'；clear ' +
clears.value +
'；工厂 ' +
observedCalls.value
);
function clearFactory() {
factoryCalls++;
return mode.value === 'factory-false'
? false
: mode.value === 'array'
? [null, null]
: undefined;
}
const emptyConfiguration = computed(() => ({
emptyValues:
mode.value === 'zero'
? ['', undefined, null, 0]
: ['', undefined, null, false, [null, null]],
valueOnClear: ['factory-false', 'undefined', 'array'].includes(mode.value)
? clearFactory
: mode.value === 'false'
? false
: mode.value === 'zero'
? 0
: null
}));
const provider = computed(() => (scope.value === 'provider' ? emptyConfiguration.value : {}));
const configuration = computed(() => ({
isRange: range.value,
format: 'HH:mm:ss',
valueFormat: mode.value === 'epoch' || mode.value === 'zero' ? 'x' : 'HH:mm:ss',
...(scope.value === 'props' ? emptyConfiguration.value : {})
}));
function restore() {
value.value =
mode.value === 'zero'
? range.value
? [86400000, 172800000]
: 86400000
: mode.value === 'epoch'
? range.value
? [0, 86400000]
: 0
: range.value
? ['09:30:00', '17:30:00']
: '09:30:00';
}
function onClear() {
clears.value++;
observedCalls.value = factoryCalls;
}
watch([mode, scope, range], restore);
restore();
</script>
<style scoped>
.demo-layout-1 {
display: grid;
gap: var(--asam-space-md);
}
</style>弹层 ClassValue 与组合两端
popperClass 支持字符串、对象、嵌套数组与 false/null/undefined。对象中 false 的键不生效；修改类名时已打开弹层同步更新，ASAM 四档尺寸类仍保留。两个独立端点分别承接同一配置。teleported=true 时弹层挂载到 body，自定义弹层样式需使用全局选择器。
完整 TS/JS 组合示例见 DatePicker 弹层类名，同时包含本入口与两端控件。
原生默认值与适配说明
isRange 默认为 false，format 默认为 HH:mm:ss，valueFormat 未设置时为 Date；modelValue 默认空字符串。 完整说明。
局部与全局浮层
基础示例使用默认的全局挂载；局部挂载示例展示显式配置的 teleported 或 appendTo。先打开控件浮层，再观察其所在容器。挂载位置与控件值、请求协议互相独立。
API
属性 AsamTimePickerProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
ariaLabel | 等价于原生 input aria-label 属性 | string | undefined | — |
id | 等价于原生 input id 属性 | (AsamTimePickerProps)["id"] | — |
popperClass | TimePicker 下拉框的类名 | AsamTimePickerProps["popperClass"] | — |
popperStyle | 为 TimePicke 的下拉菜单自定义样式 | (AsamTimePickerProps)["popperStyle"] | — |
fallbackPlacements | 提示浮层可采用的位置列表，参阅 Popper 的 fallbackPlacements。 | (AsamTimePickerProps)["fallbackPlacements"] | — |
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"完整类型：(AsamTimePickerProps)["placement"] | — |
popperOptions | 自定义浮层配置，参阅 Popper 文档。 | (AsamTimePickerProps)["popperOptions"] | — |
disabled | 禁用 | (AsamTimePickerProps)["disabled"] | false |
tabindex | 输入框的 tabindex | (AsamTimePickerProps)["tabindex"] | — |
cellClassName | — | Function | undefined | — |
type | — | string | undefined | — |
name | 原生属性 | (AsamTimePickerProps)["name"] | — |
format | 显示在输入框中的格式 | string | undefined | — |
defaultValue | 可选，选择器打开时默认显示的时间 | (AsamTimePickerProps)["defaultValue"] | — |
editable | 文本框可输入 | (AsamTimePickerProps)["editable"] | false |
emptyValues | 组件空值配置，参阅配置提供器的空值说明。 | unknown[] | undefined | — |
valueOnClear | 清空后的返回值，参阅配置提供器的空值说明。 | (AsamTimePickerProps)["valueOnClear"] | — |
validateEvent | — | (AsamTimePickerProps)["validateEvent"] | false |
disabledDate | — | Function | undefined | — |
shortcuts | — | unknown[] | undefined | — |
arrowControl | 是否使用箭头进行时间选择 | boolean | undefined | false |
unlinkPanels | — | boolean | undefined | false |
showNow | — | (AsamTimePickerProps)["showNow"] | false |
showConfirm | — | (AsamTimePickerProps)["showConfirm"] | false |
showFooter | — | (AsamTimePickerProps)["showFooter"] | false |
showWeekNumber | — | boolean | undefined | false |
clearable | 是否显示清除按钮 | (AsamTimePickerProps)["clearable"] | false |
disabledHours | 禁止选择部分小时选项 | (AsamTimePickerProps)["disabledHours"] | — |
disabledMinutes | 禁止选择部分分钟选项 | (AsamTimePickerProps)["disabledMinutes"] | — |
disabledSeconds | 禁止选择部分秒选项 | (AsamTimePickerProps)["disabledSeconds"] | — |
valueFormat | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | undefined | — |
dateFormat | — | string | undefined | — |
timeFormat | — | string | undefined | — |
defaultTime | — | (AsamTimePickerProps)["defaultTime"] | — |
isRange | 是否为时间范围选择 | boolean | undefined | false |
singlePanel | — | boolean | undefined | false |
automaticDropdown | — | (AsamTimePickerProps)["automaticDropdown"] | false |
clearIcon | 自定义清除图标 | (AsamTimePickerProps)["clearIcon"] | — |
saveOnBlur | 当未选择任何值时，是否在获得焦点时自动填充为当前时间。 | (AsamTimePickerProps)["saveOnBlur"] | false |
prefixIcon | 自定义前缀图标 | (AsamTimePickerProps)["prefixIcon"] | — |
readonly | 完全只读 | boolean | undefined | false |
placeholder | 非范围选择时的占位内容 | string | undefined | — |
rangeSeparator | 选择范围时的分隔符 | string | undefined | — |
startPlaceholder | 范围选择时开始日期的占位内容 | string | undefined | — |
endPlaceholder | 范围选择时结束日期的占位内容 | string | undefined | — |
size | 输入框尺寸 | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | — |
modelValue | 绑定值，如果它是数组，长度应该是 2 | AsamTimeValue | false |
teleported | 将浮层挂载到 document.body。 | boolean | undefined | false |
事件 AsamTimePickerEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
update:modelValue | — | [value: AsamTimeValue] | — |
change | — | [value: AsamTimeValue] | — |
focus | — | [event: FocusEvent] | — |
blur | — | [event: FocusEvent] | — |
keydown | — | [event: KeyboardEvent] | — |
clear | — | (AsamTimePickerEmits)["clear"] | — |
calendar-change | — | [value: [Date, Date | null]] | — |
panel-change | — | [value: Date | [Date, Date], mode: "year" | "month", view?: string | undefined] | — |
visible-change | — | [visible: boolean] | — |
插槽 AsamTimePickerSlots
实例方法与状态 AsamTimePickerExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
focus | — | () => void | — |
handleClose | — | () => void | — |
blur | — | () => void | — |
handleOpen | — | () => void | — |
用法与契约补充说明
ASAM 扩展与迁移
disabledHours、disabledMinutes、disabledSeconds 可随状态动态变化，范围回调会收到 start/end 的 role 以及比较端点。arrowControl 使用上下控制箭头。清空、change、update:modelValue 与 keydown 直接转发原生事件及其所有参数、顺序，不追加事件或去重。日期禁用 disabledDate 的完整日期选择场景由 DatePicker/Panel 承接，纯时间旋钮不增加日期选择行为。
ASAM 扩展与迁移
ASAM 四档 size 与表单、ConfigProvider 继承一致。空模型支持 null，展示 format 不改变存储；日期字符大小写按 valueFormat 规则配置。 validateEvent 控制表单校验触发；teleported 决定弹层挂载位置。 单点日期时间使用 DatePicker type=datetime；两个独立日期时间端点使用 DateTimeRangePicker。
API 阅读方式
固定官方文档中的 deprecated label 与源码有冲突：实际原生 props 使用 ariaLabel，不声明 label。迁移到 aria-label（TS 对象属性为 ariaLabel），文本会落在真实 input 的 aria-label 上；下方基础示例可直接验证。ASAM 不增加一个无原生承接的 label 接口。
本地化与高级配置
日期语言和控件文字是两份配置：本例的 locale.ts / locale.js 同时注册 Day.js 的 zh-cn 日期 locale，中文每周从周一开始，英文从周日开始。应用需显式安装 dayjs，并保证组件与应用消费同一实例；只切换 Provider 字典不会改变周首日。日期 locale 注册不切换应用的全局默认语言。
原生清空配置与迁移
固定 2.14.7 对某些清空哨兵与格式组合可能产生空显示、格式化异常或诊断；这些属于原生兼容限制，基础包装不接管处理。需要 nullable 业务模型的调用方应在自己的高级数据适配层处理；双端 DateTimeRangePicker/DateTimePicker 保留明确的完整范围/null 组合协议。原依赖默认字符串模型的用法需显式传入 valueFormat（日期 YYYY-MM-DD，时间 HH:mm:ss）。
原生默认值与适配说明
isRange 默认为 false，format 默认为 HH:mm:ss，valueFormat 未设置时为 Date；modelValue 默认空字符串。 其余行为默认值交由固定版本原生组件解析；显式 undefined、null、false 原样输入，不以包装层默认值覆盖。size 仅负责 ASAM large/big/default/small 四档密度及品牌样式。DatePicker/TimePicker/TimeSelect 的 focus/blur（日期和时间另有 handleOpen/handleClose）直接使用原生公开实例的接收者和返回值；Panel 没有这些输入实例方法。
关联组件
参数与事件补充说明
参数与事件说明
ariaLabel
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
id
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
popperClass
必填：否；声明来源：上游声明。
popperClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
未知 / 未声明固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
popperStyle
必填：否；声明来源：上游声明。
popperStyle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
fallbackPlacements
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：['bottom', 'top', 'right', 'left']（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：['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（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'bottom'（2.14.7；源码事实，未作为 ASAM 运行实测）
popperOptions
必填：否；声明来源：上游声明。
popperOptions 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
popperOptions.placement:PublicMember<NonNullable<(AsamTimePickerProps)["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<(AsamTimePickerProps)["popperOptions"]>, "modifiers">— 依赖声明popperOptions.strategy:PublicMember<NonNullable<(AsamTimePickerProps)["popperOptions"]>, "strategy">— 依赖声明枚举：
"fixed"/"absolute"popperOptions.onFirstUpdate:PublicMember<NonNullable<(AsamTimePickerProps)["popperOptions"]>, "onFirstUpdate">— 依赖声明事件参数：
(arg0: Parameters<Extract<NonNullable<PublicMember<NonNullable<(AsamTimePickerProps)["popperOptions"]>, "onFirstUpdate">>, (...args: never[]) => unknown>>[0]): void
默认值与来源
未知 / 未声明固定上游文档默认：{}（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码工厂（未执行）：() => ({})（2.14.7；源码事实，未作为 ASAM 运行实测）
disabled
必填：否；声明来源：上游声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
tabindex
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：0（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：0（2.14.7；源码事实，未作为 ASAM 运行实测）
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嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
type
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
name
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
format
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
defaultValue
必填：否；声明来源：上游声明。
defaultValue 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
editable
必填：否；声明来源：上游声明。
editable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：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嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
validateEvent
必填：否；声明来源：上游声明。
validateEvent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游源码默认表达式：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嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
shortcuts
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码工厂（未执行）：() => []（2.14.7；源码事实，未作为 ASAM 运行实测）
arrowControl
必填：否；声明来源：上游声明。
arrowControl 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
unlinkPanels
必填：否；声明来源：上游声明。
unlinkPanels 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）showNow
必填：否；声明来源：上游声明。
showNow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
showConfirm
必填：否；声明来源：上游声明。
showConfirm 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
showFooter
必填：否；声明来源：上游声明。
showFooter 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
showWeekNumber
必填：否；声明来源：上游声明。
showWeekNumber 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）clearable
必填：否；声明来源：上游声明。
clearable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
disabledHours
必填：否；声明来源：上游声明。
disabledHours 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(role: string, comparingDate?: Parameters<Extract<NonNullable<(AsamTimePickerProps)["disabledHours"]>, (...args: never[]) => unknown>>[1]): number[]
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
disabledMinutes
必填：否；声明来源：上游声明。
disabledMinutes 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(hour: number, role: string, comparingDate?: Parameters<Extract<NonNullable<(AsamTimePickerProps)["disabledMinutes"]>, (...args: never[]) => unknown>>[2]): number[]
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
disabledSeconds
必填：否；声明来源：上游声明。
disabledSeconds 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(hour: number, minute: number, role: string, comparingDate?: Parameters<Extract<NonNullable<(AsamTimePickerProps)["disabledSeconds"]>, (...args: never[]) => unknown>>[3]): number[]
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
valueFormat
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
dateFormat
必填：否；声明来源：上游声明。
timeFormat
必填：否；声明来源：上游声明。
defaultTime
必填：否；声明来源：上游声明。
defaultTime 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
isRange
必填：否；声明来源：ASAM 声明。
isRange 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）singlePanel
必填：否；声明来源：上游声明。
singlePanel 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）automaticDropdown
必填：否；声明来源：上游声明。
automaticDropdown 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
clearIcon
必填：否；声明来源：上游声明。
clearIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamTimePickerProps)["clearIcon"]>, (...args: never[]) => unknown>>[1]): any
clearIcon.__isFragment:undefined— 依赖声明clearIcon.__isTeleport:undefined— 依赖声明clearIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认：CircleClose（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：CircleClose（2.14.7；源码事实，未作为 ASAM 运行实测）
saveOnBlur
必填：否；声明来源：上游声明。
saveOnBlur 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
prefixIcon
必填：否；声明来源：上游声明。
prefixIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamTimePickerProps)["prefixIcon"]>, (...args: never[]) => unknown>>[1]): any
prefixIcon.__isFragment:undefined— 依赖声明prefixIcon.__isTeleport:undefined— 依赖声明prefixIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认：Clock（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
readonly
必填：否；声明来源：上游声明。
readonly 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
placeholder
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
rangeSeparator
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：'-'（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'-'（2.14.7；源码事实，未作为 ASAM 运行实测）
startPlaceholder
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
endPlaceholder
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
modelValue
必填：否；声明来源：ASAM 声明。
modelValue 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
默认值与来源
false（隐式 Boolean 默认；已安装组件）teleported
必填：否；声明来源：ASAM 声明。
teleported 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）AsamTimePickerProps 公开类型视图
ts
import type { Component, Attrs } from 'vue';
import type { AsamTimePickerProps, AsamControlSize, AsamTimeValue } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamTimePickerProps
type PublicContract = {
readonly "ariaLabel"?: string | undefined;
readonly "id"?: (AsamTimePickerProps)["id"];
readonly "popperClass"?: AsamTimePickerProps["popperClass"];
readonly "popperStyle"?: (AsamTimePickerProps)["popperStyle"];
readonly "fallbackPlacements"?: (AsamTimePickerProps)["fallbackPlacements"];
readonly "placement"?: (AsamTimePickerProps)["placement"];
readonly "popperOptions"?: (AsamTimePickerProps)["popperOptions"];
readonly "disabled"?: (AsamTimePickerProps)["disabled"];
readonly "tabindex"?: (AsamTimePickerProps)["tabindex"];
readonly "cellClassName"?: Function | undefined;
readonly "type"?: string | undefined;
readonly "name"?: (AsamTimePickerProps)["name"];
readonly "format"?: string | undefined;
readonly "defaultValue"?: (AsamTimePickerProps)["defaultValue"];
readonly "editable"?: (AsamTimePickerProps)["editable"];
readonly "emptyValues"?: unknown[] | undefined;
readonly "valueOnClear"?: (AsamTimePickerProps)["valueOnClear"];
readonly "validateEvent"?: (AsamTimePickerProps)["validateEvent"];
readonly "disabledDate"?: Function | undefined;
readonly "shortcuts"?: unknown[] | undefined;
readonly "arrowControl"?: boolean | undefined;
readonly "unlinkPanels"?: boolean | undefined;
readonly "showNow"?: (AsamTimePickerProps)["showNow"];
readonly "showConfirm"?: (AsamTimePickerProps)["showConfirm"];
readonly "showFooter"?: (AsamTimePickerProps)["showFooter"];
readonly "showWeekNumber"?: boolean | undefined;
readonly "clearable"?: (AsamTimePickerProps)["clearable"];
readonly "disabledHours"?: (AsamTimePickerProps)["disabledHours"];
readonly "disabledMinutes"?: (AsamTimePickerProps)["disabledMinutes"];
readonly "disabledSeconds"?: (AsamTimePickerProps)["disabledSeconds"];
readonly "valueFormat"?: string | undefined;
readonly "dateFormat"?: string | undefined;
readonly "timeFormat"?: string | undefined;
readonly "defaultTime"?: (AsamTimePickerProps)["defaultTime"];
readonly "isRange"?: boolean | undefined;
readonly "singlePanel"?: boolean | undefined;
readonly "automaticDropdown"?: (AsamTimePickerProps)["automaticDropdown"];
readonly "clearIcon"?: (AsamTimePickerProps)["clearIcon"];
readonly "saveOnBlur"?: (AsamTimePickerProps)["saveOnBlur"];
readonly "prefixIcon"?: (AsamTimePickerProps)["prefixIcon"];
readonly "readonly"?: boolean | undefined;
readonly "placeholder"?: string | undefined;
readonly "rangeSeparator"?: string | undefined;
readonly "startPlaceholder"?: string | undefined;
readonly "endPlaceholder"?: string | undefined;
"size"?: AsamControlSize | undefined;
"modelValue"?: AsamTimeValue;
"teleported"?: boolean | undefined;
};参数与事件说明
update:modelValue
必填：是；声明来源：ASAM 声明。
change
必填：是；声明来源：ASAM 声明。
focus
必填：是；声明来源：ASAM 声明。
blur
必填：是；声明来源：ASAM 声明。
keydown
必填：是；声明来源：ASAM 声明。
clear
必填：是；声明来源：ASAM 声明。
calendar-change
必填：是；声明来源：ASAM 声明。
panel-change
必填：是；声明来源：ASAM 声明。
visible-change
必填：是；声明来源：ASAM 声明。
AsamTimePickerEmits 公开类型视图
ts
import type { AsamTimePickerEmits, AsamTimeValue } from '@asam-ui/ui';
// AsamTimePickerEmits
type PublicContract = {
"update:modelValue": [value: AsamTimeValue];
"change": [value: AsamTimeValue];
"focus": [event: FocusEvent];
"blur": [event: FocusEvent];
"keydown": [event: KeyboardEvent];
"clear": (AsamTimePickerEmits)["clear"];
"calendar-change": [value: [Date, Date | null]];
"panel-change": [value: Date | [Date, Date], mode: "year" | "month", view?: string | undefined];
"visible-change": [visible: boolean];
};AsamTimePickerSlots 公开类型视图
ts
import type { AsamTimePickerSlots } from '@asam-ui/ui';
// AsamTimePickerSlots
type PublicContract = {
[key: string]: never;
};参数与事件说明
focus
必填：是；声明来源：上游声明。
focus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
handleClose
必填：是；声明来源：上游声明。
handleClose 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
blur
必填：是；声明来源：上游声明。
blur 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
handleOpen
必填：是；声明来源：上游声明。
handleOpen 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
AsamTimePickerExpose 公开类型视图
ts
import type { AsamTimePickerExpose } from '@asam-ui/ui';
// AsamTimePickerExpose
type PublicContract = {
"focus": () => void;
"handleClose": () => void;
"blur": () => void;
"handleOpen": () => void;
};