使用场景
在页面中常驻编辑日期。 未设置 valueFormat 时保留 Date 模型；format 控制展示，valueFormat 控制模型文本或时间戳。
原生默认模型
未设置行为属性时由原生控件解析默认值。以下完整 SFC 对照显式 undefined、null 和空字符串；输出保留原始模型类型，不把清空值统一为 null。固定原生版本的非法输入诊断与兼容限制仍按原生处理。
原生默认模型
vue
<template>
<section class="native-values-example">
<p class="example-paragraph">使用原生模型和默认值；日期/时间未传 valueFormat，选择后保持 Date。</p>
<AsamDatePickerPanel v-model="value" @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, AsamDatePickerPanel } from '@asam-ui/ui';
import type { AsamDatePickerPanelValue } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerPanelNativeValuesExample' });
const value = ref<AsamDatePickerPanelValue>();
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>
<AsamDatePickerPanel v-model="value" @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, AsamDatePickerPanel } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerPanelNativeValuesExample' });
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">
<AsamDatePickerPanel v-model="value" value-format="YYYY-MM-DD" :disabled="disabled" />
<AsamButton type="default" @click="disabled = !disabled"> 切换禁用 </AsamButton>
<AsamButton type="default" @click="value = null"> 重置为空 </AsamButton>
<output>模型：{{ value }}；禁用：{{ disabled }}</output>
</div>
</template>
<script lang="ts" setup>
import type { AsamDatePickerPanelValue } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerPanelBasicExample' });
import { ref } from 'vue';
import { AsamDatePickerPanel, AsamButton } from '@asam-ui/ui';
const value = ref<AsamDatePickerPanelValue>(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">
<AsamDatePickerPanel v-model="value" value-format="YYYY-MM-DD" :disabled="disabled" />
<AsamButton type="default" @click="disabled = !disabled"> 切换禁用 </AsamButton>
<AsamButton type="default" @click="value = null"> 重置为空 </AsamButton>
<output>模型：{{ value }}；禁用：{{ disabled }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamDatePickerPanelBasicExample' });
import { ref } from 'vue';
import { AsamDatePickerPanel, 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>范围与约束
type=daterange 保存两端日期，disabledDate 限制不可选日期。calendar-change 表示范围选择过程；最终模型由 update:modelValue 更新。
范围与约束
vue
<template>
<div class="example">
<div
class="calendar-scroll"
role="region"
aria-label="日期范围面板，窄屏时可横向滚动查看两个月并选择起止日期"
tabindex="0"
>
<AsamDatePickerPanel
v-model="range"
v-bind="{ type: 'daterange', 'value-format': 'YYYY-MM-DD' }"
:disabled-date="disabledDate"
/>
</div>
<output>范围：{{ range }}</output>
</div>
</template>
<script lang="ts" setup>
import type { AsamDatePickerPanelValue } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerPanelRangeExample' });
import { ref } from 'vue';
import { AsamDatePickerPanel } from '@asam-ui/ui';
const range = ref<AsamDatePickerPanelValue>(null);
function disabledDate(value: Date) {
return value.getFullYear() < 2025;
}
</script>
<style scoped>
.example {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.calendar-scroll {
min-width: 0;
max-width: 100%;
overflow-x: auto;
overscroll-behavior-x: contain;
}
.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="calendar-scroll"
role="region"
aria-label="日期范围面板，窄屏时可横向滚动查看两个月并选择起止日期"
tabindex="0"
>
<AsamDatePickerPanel
v-model="range"
v-bind="{ type: 'daterange', 'value-format': 'YYYY-MM-DD' }"
:disabled-date="disabledDate"
/>
</div>
<output>范围：{{ range }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamDatePickerPanelRangeExample' });
import { ref } from 'vue';
import { AsamDatePickerPanel } from '@asam-ui/ui';
const range = ref(null);
function disabledDate(value) {
return value.getFullYear() < 2025;
}
</script>
<style scoped>
.example {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.calendar-scroll {
min-width: 0;
max-width: 100%;
overflow-x: auto;
overscroll-behavior-x: contain;
}
.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>日期单元格插槽
default 插槽直接收到 DateCell，isCurrent 表示当前日期。导航插槽可以替换上月/下月和上年/下年图标。
日期单元格插槽
vue
<template>
<div class="example">
<AsamDatePickerPanel v-model="value" value-format="YYYY-MM-DD">
<template #default="cell">
<span :class="{ current: cell.isCurrent }">
{{ cell.text }}
</span>
</template>
<template #prev-month> ‹ </template>
<template #next-month> › </template>
<template #prev-year> « </template>
<template #next-year> » </template>
</AsamDatePickerPanel>
</div>
</template>
<script lang="ts" setup>
import type { AsamDatePickerPanelValue } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerPanelCellsExample' });
import { ref } from 'vue';
import { AsamDatePickerPanel } from '@asam-ui/ui';
const value = ref<AsamDatePickerPanelValue>(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">
<AsamDatePickerPanel v-model="value" value-format="YYYY-MM-DD">
<template #default="cell">
<span :class="{ current: cell.isCurrent }">
{{ cell.text }}
</span>
</template>
<template #prev-month> ‹ </template>
<template #next-month> › </template>
<template #prev-year> « </template>
<template #next-year> » </template>
</AsamDatePickerPanel>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamDatePickerPanelCellsExample' });
import { ref } from 'vue';
import { AsamDatePickerPanel } from '@asam-ui/ui';
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>
<AsamDatePickerPanel size="large" value-format="YYYY-MM-DD" />
</section>
<section>
<strong> big </strong>
<AsamDatePickerPanel size="big" value-format="YYYY-MM-DD" />
</section>
<section>
<strong> default </strong>
<AsamDatePickerPanel size="default" value-format="YYYY-MM-DD" />
</section>
<section>
<strong> small </strong>
<AsamDatePickerPanel size="small" value-format="YYYY-MM-DD" />
</section>
</div>
<AsamConfigProvider :size="density">
<section>
<AsamDatePickerPanel value-format="YYYY-MM-DD" />
</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: 'AsamDatePickerPanelSizesExample' });
import { ref } from 'vue';
import { AsamDatePickerPanel, 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>
<AsamDatePickerPanel size="large" value-format="YYYY-MM-DD" />
</section>
<section>
<strong> big </strong>
<AsamDatePickerPanel size="big" value-format="YYYY-MM-DD" />
</section>
<section>
<strong> default </strong>
<AsamDatePickerPanel size="default" value-format="YYYY-MM-DD" />
</section>
<section>
<strong> small </strong>
<AsamDatePickerPanel size="small" value-format="YYYY-MM-DD" />
</section>
</div>
<AsamConfigProvider :size="density">
<section>
<AsamDatePickerPanel value-format="YYYY-MM-DD" />
</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: 'AsamDatePickerPanelSizesExample' });
import { ref } from 'vue';
import { AsamDatePickerPanel, 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 扩展与迁移
常驻 Panel 同样支持 quarter、quarters、quarterrange 与原生范围的 singlePanel（含 datetimerange）；输入弹层的 teleported 不属于此入口。 完整说明。
ASAM 四档 size 与表单、ConfigProvider 继承一致。 完整说明。
API 阅读方式
下方 Props、Events、Slots、Exposes 按当前实际公开类型与运行默认值生成。组合属性按分支生效，不能任意混搭值模式。标为“未知 / 未声明”的默认值不代表 false 或空值。源码区域提供对应语言的独立 Demo.vue，可直接复制或下载；本地辅助组件、数据和素材已内联到当前文件。
固定 2.14.7 完整用法
下面以 ASAM 公开组件和图标入口承接固定 2.14.7 完整用途，保留 TS/JS 完整示例。基础入口使用原生默认值，未指定 valueFormat 的日期/时间选择保持 Date 模型。
基础用法
基础用法
vue
<template>
<div class="flex justify-center">
<AsamDatePickerPanel v-model="value" />
</div>
</template>
<script lang="ts" setup>
import type { AsamDatePickerPanelValue } from '@asam-ui/ui';
import { AsamDatePickerPanel } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerPanelofficialdatepickerpanelbasicExample' });
import { ref } from 'vue';
const value = ref<AsamDatePickerPanelValue>();
</script>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.flex {
display: flex;
}
.justify-center {
justify-content: center;
}
</style>vue
<template>
<div class="flex justify-center">
<AsamDatePickerPanel v-model="value" />
</div>
</template>
<script setup>
import { AsamDatePickerPanel } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerPanelofficialdatepickerpanelbasicExample' });
import { ref } from 'vue';
const value = ref();
</script>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.flex {
display: flex;
}
.justify-center {
justify-content: center;
}
</style>
边框
边框
vue
<template>
<div class="demo-layout-1">
<!-- prettier-ignore -->
<AsamButton native-type="submit" type="default" @click="border = !border">切换边框</AsamButton
><AsamDatePickerPanel v-model="value" :border="border" />
</div>
</template>
<script lang="ts" setup>
import type { AsamDatePickerPanelValue } from '@asam-ui/ui';
import { AsamButton, AsamDatePickerPanel } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerPanelofficialdatepickerpanelborderExample' });
import { ref } from 'vue';
const border = ref(true);
const value = ref<AsamDatePickerPanelValue>();
</script>
<style scoped>
.demo-layout-1 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-md);
}
</style>vue
<template>
<div class="demo-layout-1">
<!-- prettier-ignore -->
<AsamButton native-type="submit" type="default" @click="border = !border">切换边框</AsamButton
><AsamDatePickerPanel v-model="value" :border="border" />
</div>
</template>
<script setup>
import { AsamButton, AsamDatePickerPanel } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerPanelofficialdatepickerpanelborderExample' });
import { ref } from 'vue';
const border = ref(true);
const value = ref();
</script>
<style scoped>
.demo-layout-1 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-md);
}
</style>
禁用
禁用
vue
<template>
<div class="flex flex-col items-center demo-layout-1">
<AsamSwitch
:model-value="disabled"
active-text="Disabled"
inactive-text="已启用"
@update:model-value="disabled = $event === true"
/>
<AsamDatePickerPanel v-model="value" :disabled="disabled" />
</div>
</template>
<script lang="ts" setup>
import type { AsamDatePickerPanelValue } from '@asam-ui/ui';
import { AsamSwitch, AsamDatePickerPanel } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerPanelofficialdatepickerpaneldisabledExample' });
import { ref } from 'vue';
const value = ref<AsamDatePickerPanelValue>();
const disabled = ref(true);
</script>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.flex {
display: flex;
}
.items-center {
align-items: center;
}
.flex-col {
flex-direction: column;
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>vue
<template>
<div class="flex flex-col items-center demo-layout-1">
<AsamSwitch
:model-value="disabled"
active-text="Disabled"
inactive-text="已启用"
@update:model-value="disabled = $event === true"
/>
<AsamDatePickerPanel v-model="value" :disabled="disabled" />
</div>
</template>
<script setup>
import { AsamSwitch, AsamDatePickerPanel } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerPanelofficialdatepickerpaneldisabledExample' });
import { ref } from 'vue';
const value = ref();
const disabled = ref(true);
</script>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.flex {
display: flex;
}
.items-center {
align-items: center;
}
.flex-col {
flex-direction: column;
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>
全部日期类型
全部日期类型
vue
<template>
<div>
<div class="flex gap-4">
<div class="flex flex-col basis-150px demo-gap">
<span>类型：</span>
<AsamSelect :model-value="type" @update:model-value="updateType">
<AsamOption v-for="optionType in types" :key="optionType" :value="optionType" />
</AsamSelect>
</div>
</div>
<AsamDivider />
<div class="flex justify-center">
<AsamDatePickerPanel v-model="date" :type="type" />
</div>
</div>
</template>
<script lang="ts" setup>
import type { AsamDatePickerPanelValue } from '@asam-ui/ui';
import { AsamSelect, AsamOption, AsamDivider, AsamDatePickerPanel } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerPanelofficialdatepickerpanelalltypesExample' });
import { ref, watch } from 'vue';
import type { AsamDatePickerPanelProps } from '@asam-ui/ui';
type DatePickerType = NonNullable<AsamDatePickerPanelProps['type']>;
const date = ref<AsamDatePickerPanelValue>();
const type = ref<DatePickerType>('date');
watch(type, () => {
date.value = undefined;
});
const types: DatePickerType[] = [
'year',
'years',
'month',
'months',
'date',
'dates',
'week',
'quarter',
'quarters',
'quarterrange',
'datetime',
'datetimerange',
'daterange',
'monthrange',
'yearrange'
];
function updateType(value: unknown) {
const next = types.find((type) => type === value);
if (next) type.value = next;
}
</script>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.flex {
display: flex;
}
.demo-gap {
gap: var(--asam-space-sm);
}
.gap-4 {
gap: var(--asam-space-lg);
}
.justify-center {
justify-content: center;
}
.flex-col {
flex-direction: column;
}
</style>vue
<template>
<div>
<div class="flex gap-4">
<div class="flex flex-col basis-150px demo-gap">
<span>类型：</span>
<AsamSelect :model-value="type" @update:model-value="updateType">
<AsamOption v-for="optionType in types" :key="optionType" :value="optionType" />
</AsamSelect>
</div>
</div>
<AsamDivider />
<div class="flex justify-center">
<AsamDatePickerPanel v-model="date" :type="type" />
</div>
</div>
</template>
<script setup>
import { AsamSelect, AsamOption, AsamDivider, AsamDatePickerPanel } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerPanelofficialdatepickerpanelalltypesExample' });
import { ref, watch } from 'vue';
const date = ref();
const type = ref('date');
watch(type, () => {
date.value = undefined;
});
const types = [
'year',
'years',
'month',
'months',
'date',
'dates',
'week',
'quarter',
'quarters',
'quarterrange',
'datetime',
'datetimerange',
'daterange',
'monthrange',
'yearrange'
];
function updateType(value) {
const next = types.find((type) => type === value);
if (next) type.value = next;
}
</script>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.flex {
display: flex;
}
.demo-gap {
gap: var(--asam-space-sm);
}
.gap-4 {
gap: var(--asam-space-lg);
}
.justify-center {
justify-content: center;
}
.flex-col {
flex-direction: column;
}
</style>常驻季度与原生日期时间单面板范围
常驻季度与原生日期时间单面板范围
vue
<template>
<section class="demo-layout-1">
<AsamSelect v-model="type">
<AsamOption value="quarter" :label="'单季度'">单季度</AsamOption>
<AsamOption value="quarters" :label="'多季度'">多季度</AsamOption>
<AsamOption value="quarterrange" :label="'季度范围'">季度范围</AsamOption>
<AsamOption value="datetimerange" :label="'原生日期时间范围'"
>原生日期时间范围</AsamOption
>
</AsamSelect>
<!-- prettier-ignore -->
<AsamButton native-type="submit" type="default" @click="border = !border">边框 {{ border }}</AsamButton
><AsamButton native-type="submit" type="default" @click="disabled = !disabled"
>禁用 {{ disabled }}</AsamButton
>
<!-- prettier-ignore -->
<AsamDatePickerPanel
v-model="value"
:type="type"
:single-panel="true"
:border="border"
:disabled="disabled"
:show-footer="true"
:show-confirm="true"
:default-value="new Date(2026, 0, 1)"
@panel-change="recordPanel"
/>
<!-- prettier-ignore -->
<AsamButton native-type="submit" type="default" @click="value = null">null 重置</AsamButton
><output>{{ value }} {{ panelChanges }}</output>
</section>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamDatePickerPanelquartercontractExample' });
import { ref, watch } from 'vue';
import { AsamSelect, AsamOption, AsamButton, AsamDatePickerPanel } from '@asam-ui/ui';
import type { AsamDatePickerPanelProps, AsamDatePickerPanelValue } from '@asam-ui/ui';
const type = ref<AsamDatePickerPanelProps['type']>('quarter');
const value = ref<AsamDatePickerPanelValue>(null);
const disabled = ref(false);
const border = ref(true);
const panelChanges = ref(0);
const recordPanel = () => {
panelChanges.value++;
};
watch(type, () => {
value.value = null;
});
</script>
<style scoped>
.demo-layout-1 {
display: grid;
gap: var(--asam-space-md);
}
</style>vue
<template>
<section class="demo-layout-1">
<AsamSelect v-model="type">
<AsamOption value="quarter" :label="'单季度'">单季度</AsamOption>
<AsamOption value="quarters" :label="'多季度'">多季度</AsamOption>
<AsamOption value="quarterrange" :label="'季度范围'">季度范围</AsamOption>
<AsamOption value="datetimerange" :label="'原生日期时间范围'"
>原生日期时间范围</AsamOption
>
</AsamSelect>
<!-- prettier-ignore -->
<AsamButton native-type="submit" type="default" @click="border = !border">边框 {{ border }}</AsamButton
><AsamButton native-type="submit" type="default" @click="disabled = !disabled"
>禁用 {{ disabled }}</AsamButton
>
<!-- prettier-ignore -->
<AsamDatePickerPanel
v-model="value"
:type="type"
:single-panel="true"
:border="border"
:disabled="disabled"
:show-footer="true"
:show-confirm="true"
:default-value="new Date(2026, 0, 1)"
@panel-change="recordPanel"
/>
<!-- prettier-ignore -->
<AsamButton native-type="submit" type="default" @click="value = null">null 重置</AsamButton
><output>{{ value }} {{ panelChanges }}</output>
</section>
</template>
<script setup>
defineOptions({ name: 'AsamDatePickerPanelquartercontractExample' });
import { ref, watch } from 'vue';
import { AsamSelect, AsamOption, AsamButton, AsamDatePickerPanel } from '@asam-ui/ui';
const type = ref('quarter');
const value = ref(null);
const disabled = ref(false);
const border = ref(true);
const panelChanges = ref(0);
const recordPanel = () => {
panelChanges.value++;
};
watch(type, () => {
value.value = null;
});
</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: 'AsamDatePickerPanelAdvancedContractExample' },
__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 = {
type: 'datetime',
border: true,
singlePanel: true,
valueFormat: 'YYYY-MM-DD HH:mm:ss',
clearable: true,
editable: true,
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.AsamDatePickerPanel), (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, {
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event?: any) => (changes.value++)),
disabled: disabled.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))
]),
_: 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-982e0f17";
},
"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-982e0f17] {
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: 'AsamDatePickerPanelAdvancedContractExample' }, {
__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 = {
type: 'datetime',
border: true,
singlePanel: true,
valueFormat: 'YYYY-MM-DD HH:mm:ss',
clearable: true,
editable: true,
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.AsamDatePickerPanel), (0, vue_1.mergeProps)({
key: chinese.value ? 'zh-cn' : 'en',
modelValue: value.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = $event => ((value).value = $event))
}, configuration, {
"onUpdate:modelValue": _cache[3] || (_cache[3] = $event => (changes.value++)),
disabled: disabled.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))
]),
_: 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-013c12fd";
},
"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-013c12fd] {
display: grid;
gap: var(--asam-space-md);
}
</style>公开面板侧栏
sidebar 收到原生 class: string，把它绑定到侧栏根节点可保留布局。单点日期、日期时间、周/月/年/季度及对应多选和五类范围面板使用该侧栏。范围 singlePanel 仍按原有适用 type 生效。 示例保留单元格、导航插槽；输入弹层可以切换 teleported，本体 Panel 就地渲染。
快捷项与自定义侧栏各自渲染一个原生侧栏块；固定版本两块占用同一左侧区域，启用快捷项可能覆盖自定义侧栏内容。示例明确展示此原生组合行为，需要交互的自定义侧栏应关闭快捷项，或把自己的快捷操作放入同一自定义侧栏；ASAM 不额外改变原生几何布局。
公开侧栏与快捷项
原生默认值与适配说明
type 默认为 date，modelValue 默认空字符串，valueFormat 未设置时为 Date；border 默认为 true，showFooter/showConfirm 默认为 false。 完整说明。
API
属性 AsamDatePickerPanelProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
disabled | 禁用 | (AsamDatePickerPanelProps)["disabled"] | false |
border | 日期选择器是否有边框 | (AsamDatePickerPanelProps)["border"] | false |
cellClassName | 设置自定义类名 | Function | undefined | — |
defaultValue | 可选，选择器打开时默认显示的时间 | (AsamDatePickerPanelProps)["defaultValue"] | — |
editable | 文本框可输入 | (AsamDatePickerPanelProps)["editable"] | false |
disabledDate | 一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。应该返回一个 Boolean 值。 | Function | undefined | — |
shortcuts | 设置快捷选项，需要传入数组对象 | unknown[] | undefined | — |
arrowControl | — | boolean | undefined | false |
unlinkPanels | 在范围选择器里取消两个日期面板之间的联动 | boolean | undefined | false |
showNow | — | (AsamDatePickerPanelProps)["showNow"] | false |
showConfirm | 是否显示确定按钮 | boolean | undefined | false |
showFooter | dates、months、years、quarters、datetime 或 datetimerange 模式下是否显示底部。 | boolean | undefined | false |
showWeekNumber | 显示周数(除周外) | boolean | undefined | false |
clearable | 是否显示清除按钮 | (AsamDatePickerPanelProps)["clearable"] | false |
disabledHours | — | (AsamDatePickerPanelProps)["disabledHours"] | — |
disabledMinutes | — | (AsamDatePickerPanelProps)["disabledMinutes"] | — |
disabledSeconds | — | (AsamDatePickerPanelProps)["disabledSeconds"] | — |
valueFormat | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | undefined | — |
dateFormat | 可选，输入框内部面板中显示的日期格式 | string | undefined | — |
timeFormat | 可选，输入框内部面板中显示的时间格式 | string | undefined | — |
defaultTime | 范围选择时选中日期所使用的当日内具体时刻 | (AsamDatePickerPanelProps)["defaultTime"] | — |
isRange | — | boolean | undefined | false |
size | — | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | — |
modelValue | 绑定值，如果是 range 选择器，数组长度应为 2 | AsamDatePickerPanelValue | — |
type | 选择器类型；自 2.14.5 起支持 quarter、quarters 和 quarterrange。 | enum"date" | "year" | "years" | "month" | "months" | "dates" | "week" | "quarter" | "quarters" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange" | "quarterrange"完整类型：(AsamDatePickerPanelProps)["type"] | — |
singlePanel | 原生范围模式的单面板配置，包括 datetimerange。 | boolean | undefined | false |
事件 AsamDatePickerPanelEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
update:modelValue | — | [value: AsamDatePickerPanelValue] | — |
clear | — | (AsamDatePickerPanelEmits)["clear"] | — |
calendar-change | — | [value: [Date, Date | null]] | — |
panel-change | — | [value: Date | [Date, Date], mode: "year" | "month", view?: string | undefined] | — |
visible-change | — | [visible: boolean] | — |
插槽 AsamDatePickerPanelSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | (AsamDatePickerPanelSlots)["default"] | — |
sidebar | 原生面板侧栏；指定类名应用到侧栏根节点。 | ((scope: { class: string; }) => unknown) | undefined | — |
prev-month | — | (() => unknown) | undefined | — |
next-month | — | (() => unknown) | undefined | — |
prev-year | — | (() => unknown) | undefined | — |
next-year | — | (() => unknown) | undefined | — |
实例方法与状态 AsamDatePickerPanelExpose
用法与契约补充说明
ASAM 扩展与迁移
常驻 Panel 同样支持 quarter、quarters、quarterrange 与原生范围的 singlePanel（含 datetimerange）；输入弹层的 teleported 不属于此入口。border 控制面板边框，disabled 禁用选择，切换 type 时调用方应重置不兼容的模型。showFooter 和 showConfirm 默认为 false，需要多选确认流程时显式打开。
ASAM 扩展与迁移
ASAM 四档 size 与表单、ConfigProvider 继承一致。null、undefined 和空字符串直接交给原生 Panel，不进行边界转换；遇到原生对某种输入的警告或异常时由调用方选择原生支持的模型。未指定模型时保留原生默认值，展示 format 不改变存储；日期字符大小写按 valueFormat 规则配置。 常驻面板不提供输入聚焦或打开方法，当前 expose 为空。 单点日期时间使用 DatePicker type=datetime；两个独立日期时间端点使用 DateTimeRangePicker。
本地化与高级配置
日期语言和控件文字是两份配置：本例的 locale.ts / locale.js 同时注册 Day.js 的 zh-cn 日期 locale，中文每周从周一开始，英文从周日开始。应用需显式安装 dayjs，并保证组件与应用消费同一实例；只切换 Provider 字典不会改变周首日。日期 locale 注册不切换应用的全局默认语言。
原生默认值与适配说明
type 默认为 date，modelValue 默认空字符串，valueFormat 未设置时为 Date；border 默认为 true，showFooter/showConfirm 默认为 false。 其余行为默认值交由固定版本原生组件解析；显式 undefined、null、false 原样输入，不以包装层默认值覆盖。size 仅负责 ASAM large/big/default/small 四档密度及品牌样式。DatePicker/TimePicker/TimeSelect 的 focus/blur（日期和时间另有 handleOpen/handleClose）直接使用原生公开实例的接收者和返回值；Panel 没有这些输入实例方法。
关联组件
参数与事件补充说明
参数与事件说明
disabled
必填：否；声明来源：上游声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
border
必填：否；声明来源：上游声明。
border 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（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嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（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 运行实测）
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 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
shortcuts
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：[]（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码工厂（未执行）：() => []（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
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
showConfirm
必填：否；声明来源：上游声明。
showConfirm 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
showFooter
必填：否；声明来源：上游声明。
showFooter 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
showWeekNumber
必填：否；声明来源：上游声明。
showWeekNumber 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
clearable
必填：否；声明来源：上游声明。
clearable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
disabledHours
必填：否；声明来源：上游声明。
disabledHours 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(role: string, comparingDate?: Parameters<Extract<NonNullable<(AsamDatePickerPanelProps)["disabledHours"]>, (...args: never[]) => unknown>>[1]): number[]
disabledMinutes
必填：否；声明来源：上游声明。
disabledMinutes 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(hour: number, role: string, comparingDate?: Parameters<Extract<NonNullable<(AsamDatePickerPanelProps)["disabledMinutes"]>, (...args: never[]) => unknown>>[2]): number[]
disabledSeconds
必填：否；声明来源：上游声明。
disabledSeconds 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(hour: number, minute: number, role: string, comparingDate?: Parameters<Extract<NonNullable<(AsamDatePickerPanelProps)["disabledSeconds"]>, (...args: never[]) => unknown>>[3]): number[]
valueFormat
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
dateFormat
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：YYYY-MM-DD（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
timeFormat
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：HH:mm:ss（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
defaultTime
必填：否；声明来源：上游声明。
defaultTime 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
isRange
必填：否；声明来源：上游声明。
isRange 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
modelValue
必填：否；声明来源：ASAM 声明。
modelValue 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
type
必填：否；声明来源：ASAM 声明。
type 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："date" / "year" / "years" / "month" / "months" / "dates" / "week" / "quarter" / "quarters" / "datetime" / "datetimerange" / "daterange" / "monthrange" / "yearrange" / "quarterrange"
singlePanel
必填：否；声明来源：ASAM 声明。
singlePanel 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）AsamDatePickerPanelProps 公开类型视图
ts
import type { AsamDatePickerPanelProps, AsamControlSize, AsamDatePickerPanelValue } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamDatePickerPanelProps
type PublicContract = {
readonly "disabled"?: (AsamDatePickerPanelProps)["disabled"];
readonly "border"?: (AsamDatePickerPanelProps)["border"];
readonly "cellClassName"?: Function | undefined;
readonly "defaultValue"?: (AsamDatePickerPanelProps)["defaultValue"];
readonly "editable"?: (AsamDatePickerPanelProps)["editable"];
readonly "disabledDate"?: Function | undefined;
readonly "shortcuts"?: unknown[] | undefined;
readonly "arrowControl"?: boolean | undefined;
readonly "unlinkPanels"?: boolean | undefined;
readonly "showNow"?: (AsamDatePickerPanelProps)["showNow"];
readonly "showConfirm"?: boolean | undefined;
readonly "showFooter"?: boolean | undefined;
readonly "showWeekNumber"?: boolean | undefined;
readonly "clearable"?: (AsamDatePickerPanelProps)["clearable"];
readonly "disabledHours"?: (AsamDatePickerPanelProps)["disabledHours"];
readonly "disabledMinutes"?: (AsamDatePickerPanelProps)["disabledMinutes"];
readonly "disabledSeconds"?: (AsamDatePickerPanelProps)["disabledSeconds"];
readonly "valueFormat"?: string | undefined;
readonly "dateFormat"?: string | undefined;
readonly "timeFormat"?: string | undefined;
readonly "defaultTime"?: (AsamDatePickerPanelProps)["defaultTime"];
readonly "isRange"?: boolean | undefined;
"size"?: AsamControlSize | undefined;
"modelValue"?: AsamDatePickerPanelValue;
"type"?: (AsamDatePickerPanelProps)["type"];
"singlePanel"?: boolean | undefined;
};参数与事件说明
update:modelValue
必填：是；声明来源：ASAM 声明。
clear
必填：是；声明来源：ASAM 声明。
calendar-change
必填：是；声明来源：ASAM 声明。
panel-change
必填：是；声明来源：ASAM 声明。
visible-change
必填：是；声明来源：ASAM 声明。
AsamDatePickerPanelEmits 公开类型视图
ts
import type { AsamDatePickerPanelEmits, AsamDatePickerPanelValue } from '@asam-ui/ui';
// AsamDatePickerPanelEmits
type PublicContract = {
"update:modelValue": [value: AsamDatePickerPanelValue];
"clear": (AsamDatePickerPanelEmits)["clear"];
"calendar-change": [value: [Date, Date | null]];
"panel-change": [value: Date | [Date, Date], mode: "year" | "month", view?: string | undefined];
"visible-change": [visible: boolean];
};参数与事件说明
default
必填：否；声明来源：ASAM 声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(cell: Parameters<Extract<NonNullable<(AsamDatePickerPanelSlots)["default"]>, (...args: never[]) => unknown>>[0]): unknown
sidebar
必填：否；声明来源：ASAM 声明。
sidebar 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: { class: string; }): 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
AsamDatePickerPanelSlots 公开类型视图
ts
import type { AsamDatePickerPanelSlots } from '@asam-ui/ui';
// AsamDatePickerPanelSlots
type PublicContract = {
"default"?: (AsamDatePickerPanelSlots)["default"];
"sidebar"?: ((scope: { class: string; }) => unknown) | undefined;
"prev-month"?: (() => unknown) | undefined;
"next-month"?: (() => unknown) | undefined;
"prev-year"?: (() => unknown) | undefined;
"next-year"?: (() => unknown) | undefined;
};AsamDatePickerPanelExpose 公开类型视图
ts
import type { AsamDatePickerPanelExpose } from '@asam-ui/ui';
// AsamDatePickerPanelExpose
type PublicContract = {
[key: string]: never;
};