使用场景
通过输入框与弹层编辑日期或日期时间。 未设置 valueFormat 时保持原生 Date 模型；需要字符串或时间戳时显式配置 valueFormat。format 控制展示，valueFormat 控制模型文本或时间戳。
原生默认模型
未设置行为属性时由原生控件解析默认值。以下完整 SFC 对照显式 undefined、null 和空字符串；输出保留原始模型类型，不把清空值统一为 null。固定原生版本的非法输入诊断与兼容限制仍按原生处理。
原生默认模型
vue
<template>
<section class="native-values-example">
<p class="example-paragraph">使用原生模型和默认值；日期/时间未传 valueFormat，选择后保持 Date。</p>
<AsamDatePicker 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, AsamDatePicker } from '@asam-ui/ui';
import type { AsamDateValue } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerNativeValuesExample' });
const value = ref<AsamDateValue>();
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>
<AsamDatePicker 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, AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerNativeValuesExample' });
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">
<AsamDatePicker
v-model="value"
v-bind="{ 'value-format': 'YYYY-MM-DD', 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 { AsamDateValue } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerBasicExample' });
import { ref } from 'vue';
import { AsamDatePicker, AsamButton } from '@asam-ui/ui';
const value = ref<AsamDateValue>(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">
<AsamDatePicker
v-model="value"
v-bind="{ 'value-format': 'YYYY-MM-DD', clearable: true, 'aria-label': '选择时间' }"
:disabled="disabled"
/>
<AsamButton type="default" @click="disabled = !disabled"> 切换禁用 </AsamButton>
<output>模型：{{ value }}；禁用：{{ disabled }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamDatePickerBasicExample' });
import { ref } from 'vue';
import { AsamDatePicker, 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">
<AsamDatePicker
v-model="range"
v-bind="{ type: 'daterange', 'value-format': 'YYYY-MM-DD' }"
:disabled-date="disabledDate"
/>
<output>范围：{{ range }}</output>
</div>
</template>
<script lang="ts" setup>
import type { AsamDateValue } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerRangeExample' });
import { ref } from 'vue';
import { AsamDatePicker } from '@asam-ui/ui';
const range = ref<AsamDateValue>(null);
function disabledDate(value: Date) {
return value.getFullYear() < 2025;
}
</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">
<AsamDatePicker
v-model="range"
v-bind="{ type: 'daterange', 'value-format': 'YYYY-MM-DD' }"
:disabled-date="disabledDate"
/>
<output>范围：{{ range }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamDatePickerRangeExample' });
import { ref } from 'vue';
import { AsamDatePicker } from '@asam-ui/ui';
const range = ref(null);
function disabledDate(value) {
return value.getFullYear() < 2025;
}
</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>日期单元格插槽
default 插槽直接收到 DateCell，isCurrent 表示当前日期。导航插槽可以替换上月/下月和上年/下年图标。
日期单元格插槽
vue
<template>
<div class="example">
<AsamDatePicker 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>
</AsamDatePicker>
</div>
</template>
<script lang="ts" setup>
import type { AsamDateValue } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerCellsExample' });
import { ref } from 'vue';
import { AsamDatePicker } from '@asam-ui/ui';
const value = ref<AsamDateValue>(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">
<AsamDatePicker 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>
</AsamDatePicker>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamDatePickerCellsExample' });
import { ref } from 'vue';
import { AsamDatePicker } 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>公开实例操作
focus/blur 访问输入；handleOpen/handleClose 打开和关闭选择弹层。
公开实例操作
vue
<template>
<div class="example">
<AsamDatePicker ref="control" v-model="value" value-format="YYYY-MM-DD" />
<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 { AsamDateValue } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerInstanceExample' });
import { ref } from 'vue';
import { AsamDatePicker, AsamButton } from '@asam-ui/ui';
import type { AsamDatePickerExpose } from '@asam-ui/ui';
const control = ref<AsamDatePickerExpose>();
const value = ref<AsamDateValue>(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">
<AsamDatePicker ref="control" v-model="value" value-format="YYYY-MM-DD" />
<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: 'AsamDatePickerInstanceExample' });
import { ref } from 'vue';
import { AsamDatePicker, 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>日期单位与单点日期时间
year、month、week 选择不同日期单位，dates 允许多个日期。datetime 表示一个带时间的端点，valueFormat 显式包含时间；两个独立端点使用 DateTimeRangePicker。
日期单位与单点日期时间
vue
<template>
<div class="example">
<AsamDatePicker
v-model="year"
v-bind="{ type: 'year', 'value-format': 'YYYY', placeholder: '年份' }"
/>
<AsamDatePicker
v-model="month"
v-bind="{ type: 'month', 'value-format': 'YYYY-MM', placeholder: '月份' }"
/>
<AsamDatePicker
v-model="week"
v-bind="{ type: 'week', format: 'YYYY [第] ww [周]', placeholder: '周' }"
/>
<AsamDatePicker
v-model="dates"
v-bind="{ type: 'dates', 'value-format': 'YYYY-MM-DD', placeholder: '多个日期' }"
/>
<AsamDatePicker
v-model="datetime"
v-bind="{
type: 'datetime',
format: 'YYYY-MM-DD HH:mm:ss',
'value-format': 'YYYY-MM-DD HH:mm:ss',
placeholder: '单点日期时间'
}"
/>
<output>
年：{{ year }}；月：{{ month }}；周：{{ week }}；日期：{{ dates }}；日期时间：{{
datetime
}}
</output>
</div>
</template>
<script lang="ts" setup>
import type { AsamDateValue } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickermodesExample' });
import { ref } from 'vue';
import { AsamDatePicker } from '@asam-ui/ui';
const year = ref<AsamDateValue>(null);
const month = ref<AsamDateValue>(null);
const week = ref<AsamDateValue>(null);
const dates = ref<AsamDateValue>([]);
const datetime = ref<AsamDateValue>(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">
<AsamDatePicker
v-model="year"
v-bind="{ type: 'year', 'value-format': 'YYYY', placeholder: '年份' }"
/>
<AsamDatePicker
v-model="month"
v-bind="{ type: 'month', 'value-format': 'YYYY-MM', placeholder: '月份' }"
/>
<AsamDatePicker
v-model="week"
v-bind="{ type: 'week', format: 'YYYY [第] ww [周]', placeholder: '周' }"
/>
<AsamDatePicker
v-model="dates"
v-bind="{ type: 'dates', 'value-format': 'YYYY-MM-DD', placeholder: '多个日期' }"
/>
<AsamDatePicker
v-model="datetime"
v-bind="{
type: 'datetime',
format: 'YYYY-MM-DD HH:mm:ss',
'value-format': 'YYYY-MM-DD HH:mm:ss',
placeholder: '单点日期时间'
}"
/>
<output>
年：{{ year }}；月：{{ month }}；周：{{ week }}；日期：{{ dates }}；日期时间：{{
datetime
}}
</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamDatePickermodesExample' });
import { ref } from 'vue';
import { AsamDatePicker } from '@asam-ui/ui';
const year = ref(null);
const month = ref(null);
const week = ref(null);
const dates = ref([]);
const datetime = 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>月份、年份和日期时间范围
原生范围选择提交两个端点；清空输出由 emptyValues/valueOnClear 决定，不统一转换为 null。不同 type 使用相应 valueFormat；defaultTime 只设置缺省时刻，disabledDate 用于日期限制，业务起止校验仍由调用方负责。
月份、年份和日期时间范围
vue
<template>
<div class="example">
<AsamDatePicker
v-model="months"
v-bind="{
type: 'monthrange',
'value-format': 'YYYY-MM',
'start-placeholder': '开始月份',
'end-placeholder': '结束月份'
}"
/>
<AsamDatePicker
v-model="years"
v-bind="{
type: 'yearrange',
'value-format': 'YYYY',
'start-placeholder': '开始年份',
'end-placeholder': '结束年份'
}"
/>
<AsamDatePicker
v-model="times"
v-bind="{
type: 'datetimerange',
format: 'YYYY-MM-DD HH:mm:ss',
'value-format': 'YYYY-MM-DD HH:mm:ss',
'default-time': defaultTime
}"
/>
<output>月份：{{ months }}；年份：{{ years }}；日期时间：{{ times }}</output>
</div>
</template>
<script lang="ts" setup>
import type { AsamDateValue } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerrangemodesExample' });
import { ref } from 'vue';
import { AsamDatePicker } from '@asam-ui/ui';
const months = ref<AsamDateValue>(null);
const years = ref<AsamDateValue>(null);
const times = ref<AsamDateValue>(null);
const defaultTime = [new Date(2000, 0, 1, 9, 0, 0), new Date(2000, 0, 1, 18, 0, 0)];
</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">
<AsamDatePicker
v-model="months"
v-bind="{
type: 'monthrange',
'value-format': 'YYYY-MM',
'start-placeholder': '开始月份',
'end-placeholder': '结束月份'
}"
/>
<AsamDatePicker
v-model="years"
v-bind="{
type: 'yearrange',
'value-format': 'YYYY',
'start-placeholder': '开始年份',
'end-placeholder': '结束年份'
}"
/>
<AsamDatePicker
v-model="times"
v-bind="{
type: 'datetimerange',
format: 'YYYY-MM-DD HH:mm:ss',
'value-format': 'YYYY-MM-DD HH:mm:ss',
'default-time': defaultTime
}"
/>
<output>月份：{{ months }}；年份：{{ years }}；日期时间：{{ times }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamDatePickerrangemodesExample' });
import { ref } from 'vue';
import { AsamDatePicker } from '@asam-ui/ui';
const months = ref(null);
const years = ref(null);
const times = ref(null);
const defaultTime = [new Date(2000, 0, 1, 9, 0, 0), new Date(2000, 0, 1, 18, 0, 0)];
</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>
<AsamDatePicker size="large" value-format="YYYY-MM-DD" />
</section>
<section>
<strong> big </strong>
<AsamDatePicker size="big" value-format="YYYY-MM-DD" />
</section>
<section>
<strong> default </strong>
<AsamDatePicker size="default" value-format="YYYY-MM-DD" />
</section>
<section>
<strong> small </strong>
<AsamDatePicker size="small" value-format="YYYY-MM-DD" />
</section>
</div>
<AsamConfigProvider :size="density">
<section>
<AsamDatePicker 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: 'AsamDatePickerSizesExample' });
import { ref } from 'vue';
import { AsamDatePicker, 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>
<AsamDatePicker size="large" value-format="YYYY-MM-DD" />
</section>
<section>
<strong> big </strong>
<AsamDatePicker size="big" value-format="YYYY-MM-DD" />
</section>
<section>
<strong> default </strong>
<AsamDatePicker size="default" value-format="YYYY-MM-DD" />
</section>
<section>
<strong> small </strong>
<AsamDatePicker size="small" value-format="YYYY-MM-DD" />
</section>
</div>
<AsamConfigProvider :size="density">
<section>
<AsamDatePicker 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: 'AsamDatePickerSizesExample' });
import { ref } from 'vue';
import { AsamDatePicker, 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 扩展与迁移
2.14.7 新增 quarter、quarters、quarterrange，季度展示可用 YYYY [年第] Q [季度]，模型可用 YYYY-[Q]Q。 完整说明。
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="demo-root-layout">
<AsamRadioGroup
:model-value="size"
v-bind="{ 'aria-label': 'size control' }"
class="mb-4"
@update:model-value="updatesize"
>
<AsamRadioButton value="large">large</AsamRadioButton>
<AsamRadioButton value="default">default</AsamRadioButton>
<AsamRadioButton value="small">small</AsamRadioButton>
</AsamRadioGroup>
<div class="demo-date-picker demo-layout-1">
<div class="block">
<span class="demonstration">默认</span>
<AsamDatePicker
v-model="value1"
value-format=""
type="date"
placeholder="选择日期"
:size="size"
/>
</div>
<div class="block">
<span class="demonstration">带快捷选项的选择器</span>
<AsamDatePicker
v-model="value2"
value-format=""
type="date"
placeholder="选择日期"
:disabled-date="disabledDate"
:shortcuts="shortcuts"
:size="size"
/>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import type { AsamDateValue } from '@asam-ui/ui';
import { AsamRadioGroup, AsamRadioButton, AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatepickerenterdateExample' });
import { ref } from 'vue';
const size = ref<'default' | 'large' | 'small'>('default');
const value1 = ref<AsamDateValue>('');
const value2 = ref<AsamDateValue>('');
const shortcuts = [
{
text: 'Today',
value: new Date()
},
{
text: 'Yesterday',
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date;
}
},
{
text: '一周前',
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date;
}
}
];
const disabledDate = (time: Date) => {
return time.getTime() > Date.now();
};
function updatesize(value: unknown) {
if (value === 'large' || value === 'default' || value === 'small') size.value = value;
}
</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-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 1.5rem 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 300px;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
}
@media screen and (width <= 768px) {
.demo-date-picker .block {
flex: 0 0 100%;
padding: 1rem 0;
min-width: auto;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.mb-4 {
margin-bottom: var(--asam-space-lg);
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>
<style scoped>
.demo-root-layout {
display: flex;
gap: var(--asam-space-md);
flex-wrap: wrap;
align-items: center;
}
.demo-root-layout > :is(p, pre, output) {
margin-block: 0;
}
</style>vue
<template>
<div class="demo-root-layout">
<AsamRadioGroup
:model-value="size"
v-bind="{ 'aria-label': 'size control' }"
class="mb-4"
@update:model-value="updatesize"
>
<AsamRadioButton value="large">large</AsamRadioButton>
<AsamRadioButton value="default">default</AsamRadioButton>
<AsamRadioButton value="small">small</AsamRadioButton>
</AsamRadioGroup>
<div class="demo-date-picker demo-layout-1">
<div class="block">
<span class="demonstration">默认</span>
<AsamDatePicker
v-model="value1"
value-format=""
type="date"
placeholder="选择日期"
:size="size"
/>
</div>
<div class="block">
<span class="demonstration">带快捷选项的选择器</span>
<AsamDatePicker
v-model="value2"
value-format=""
type="date"
placeholder="选择日期"
:disabled-date="disabledDate"
:shortcuts="shortcuts"
:size="size"
/>
</div>
</div>
</div>
</template>
<script setup>
import { AsamRadioGroup, AsamRadioButton, AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatepickerenterdateExample' });
import { ref } from 'vue';
const size = ref('default');
const value1 = ref('');
const value2 = ref('');
const shortcuts = [
{
text: 'Today',
value: new Date()
},
{
text: 'Yesterday',
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date;
}
},
{
text: '一周前',
value: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
return date;
}
}
];
const disabledDate = (time) => {
return time.getTime() > Date.now();
};
function updatesize(value) {
if (value === 'large' || value === 'default' || value === 'small') size.value = value;
}
</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-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 1.5rem 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 300px;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
}
@media screen and (width <= 768px) {
.demo-date-picker .block {
flex: 0 0 100%;
padding: 1rem 0;
min-width: auto;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.mb-4 {
margin-bottom: var(--asam-space-lg);
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>
<style scoped>
.demo-root-layout {
display: flex;
gap: var(--asam-space-md);
flex-wrap: wrap;
align-items: center;
}
.demo-root-layout > :is(p, pre, output) {
margin-block: 0;
}
</style>
其他日期单位
其他日期单位
vue
<template>
<div class="demo-date-picker demo-layout-1">
<div class="container demo-layout-2">
<div class="block">
<span class="demonstration">周</span>
<AsamDatePicker
v-model="value1"
value-format=""
type="week"
format="[Week] ww"
placeholder="选择周"
/>
</div>
<div class="block">
<span class="demonstration">年份</span>
<AsamDatePicker
v-model="value3"
value-format=""
type="year"
placeholder="选择年份"
/>
</div>
<div class="block">
<span class="demonstration">月份</span>
<AsamDatePicker
v-model="value5"
value-format=""
type="month"
placeholder="选择月份"
/>
</div>
<div class="block">
<span class="demonstration">季度</span>
<AsamDatePicker
v-model="value7"
value-format=""
type="quarter"
placeholder="选择季度"
/>
</div>
</div>
<div class="container demo-layout-3">
<div class="block">
<span class="demonstration">多个日期</span>
<AsamDatePicker
v-model="value2"
value-format=""
type="dates"
placeholder="选择一个或多个日期"
/>
</div>
<div class="block">
<span class="demonstration">多个年份</span>
<AsamDatePicker
v-model="value4"
value-format=""
type="years"
placeholder="选择一个或多个年份"
/>
</div>
<div class="block">
<span class="demonstration">多个月份</span>
<AsamDatePicker
v-model="value6"
value-format=""
type="months"
placeholder="选择一个或多个月份"
/>
</div>
<div class="block">
<span class="demonstration">多个季度</span>
<AsamDatePicker
v-model="value8"
value-format=""
type="quarters"
placeholder="选择一个或多个季度"
/>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import type { AsamDateValue } from '@asam-ui/ui';
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatepickerothermeasurementsExample' });
import { ref } from 'vue';
const value1 = ref<AsamDateValue>('');
const value2 = ref<AsamDateValue>('');
const value3 = ref<AsamDateValue>('');
const value4 = ref<AsamDateValue>('');
const value5 = ref<AsamDateValue>('');
const value6 = ref<AsamDateValue>('');
const value7 = ref<AsamDateValue>('');
const value8 = ref<AsamDateValue>([]);
</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-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .container {
flex: 1;
min-width: 300px;
border-right: solid 1px var(--el-border-color);
}
.demo-date-picker .container:last-child {
border-right: none;
}
.demo-date-picker .block {
padding: 1.5rem 0;
text-align: center;
}
.demo-date-picker .container .block:not(:first-child) {
border-top: solid 1px var(--el-border-color);
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
}
@media screen and (width <= 768px) {
.demo-date-picker .container {
flex: 0 0 100%;
min-width: auto;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker .container:last-child {
border-bottom: none;
}
.demo-date-picker .block {
padding: 1rem 0;
}
.demo-date-picker .container .block:not(:first-child) {
border-top: solid 1px var(--el-border-color);
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
.demo-layout-2 {
display: grid;
gap: var(--asam-space-md);
}
.demo-layout-3 {
display: grid;
gap: var(--asam-space-md);
}
</style>vue
<template>
<div class="demo-date-picker demo-layout-1">
<div class="container demo-layout-2">
<div class="block">
<span class="demonstration">周</span>
<AsamDatePicker
v-model="value1"
value-format=""
type="week"
format="[Week] ww"
placeholder="选择周"
/>
</div>
<div class="block">
<span class="demonstration">年份</span>
<AsamDatePicker
v-model="value3"
value-format=""
type="year"
placeholder="选择年份"
/>
</div>
<div class="block">
<span class="demonstration">月份</span>
<AsamDatePicker
v-model="value5"
value-format=""
type="month"
placeholder="选择月份"
/>
</div>
<div class="block">
<span class="demonstration">季度</span>
<AsamDatePicker
v-model="value7"
value-format=""
type="quarter"
placeholder="选择季度"
/>
</div>
</div>
<div class="container demo-layout-3">
<div class="block">
<span class="demonstration">多个日期</span>
<AsamDatePicker
v-model="value2"
value-format=""
type="dates"
placeholder="选择一个或多个日期"
/>
</div>
<div class="block">
<span class="demonstration">多个年份</span>
<AsamDatePicker
v-model="value4"
value-format=""
type="years"
placeholder="选择一个或多个年份"
/>
</div>
<div class="block">
<span class="demonstration">多个月份</span>
<AsamDatePicker
v-model="value6"
value-format=""
type="months"
placeholder="选择一个或多个月份"
/>
</div>
<div class="block">
<span class="demonstration">多个季度</span>
<AsamDatePicker
v-model="value8"
value-format=""
type="quarters"
placeholder="选择一个或多个季度"
/>
</div>
</div>
</div>
</template>
<script setup>
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatepickerothermeasurementsExample' });
import { ref } from 'vue';
const value1 = ref('');
const value2 = ref('');
const value3 = ref('');
const value4 = ref('');
const value5 = ref('');
const value6 = ref('');
const value7 = ref('');
const value8 = 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. */
.demo-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .container {
flex: 1;
min-width: 300px;
border-right: solid 1px var(--el-border-color);
}
.demo-date-picker .container:last-child {
border-right: none;
}
.demo-date-picker .block {
padding: 1.5rem 0;
text-align: center;
}
.demo-date-picker .container .block:not(:first-child) {
border-top: solid 1px var(--el-border-color);
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
}
@media screen and (width <= 768px) {
.demo-date-picker .container {
flex: 0 0 100%;
min-width: auto;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker .container:last-child {
border-bottom: none;
}
.demo-date-picker .block {
padding: 1rem 0;
}
.demo-date-picker .container .block:not(:first-child) {
border-top: solid 1px var(--el-border-color);
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
.demo-layout-2 {
display: grid;
gap: var(--asam-space-md);
}
.demo-layout-3 {
display: grid;
gap: var(--asam-space-md);
}
</style>
日期范围
日期范围
vue
<template>
<div class="demo-root-layout">
<AsamRadioGroup
:model-value="size"
v-bind="{ 'aria-label': 'size control' }"
class="mb-4"
@update:model-value="updatesize"
>
<AsamRadioButton value="large">large</AsamRadioButton>
<AsamRadioButton value="default">default</AsamRadioButton>
<AsamRadioButton value="small">small</AsamRadioButton>
</AsamRadioGroup>
<div class="demo-date-picker demo-layout-1">
<div class="block">
<span class="demonstration">默认</span>
<AsamDatePicker
v-model="value1"
value-format=""
type="daterange"
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
:size="size"
/>
</div>
<div class="block">
<span class="demonstration">带快捷选项</span>
<AsamDatePicker
v-model="value2"
value-format=""
type="daterange"
unlink-panels
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
:shortcuts="shortcuts"
:size="size"
/>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import type { AsamDateValue } from '@asam-ui/ui';
import { AsamRadioGroup, AsamRadioButton, AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatepickerdaterangeExample' });
import { ref } from 'vue';
const size = ref<'default' | 'large' | 'small'>('default');
const value1 = ref<AsamDateValue>('');
const value2 = ref<AsamDateValue>('');
const shortcuts = [
{
text: '最近一周',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
}
},
{
text: '最近一个月',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
}
},
{
text: 'Last 3 months',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
}
}
];
function updatesize(value: unknown) {
if (value === 'large' || value === 'default' || value === 'small') size.value = value;
}
</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-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 1.5rem 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 400px;
display: flex;
flex-direction: column;
align-items: center;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
}
@media screen and (width <= 1200px) {
.demo-date-picker .block {
flex: 0 0 100%;
padding: 1rem 0;
min-width: auto;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.mb-4 {
margin-bottom: var(--asam-space-lg);
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>
<style scoped>
.demo-root-layout {
display: flex;
gap: var(--asam-space-md);
flex-wrap: wrap;
align-items: center;
}
.demo-root-layout > :is(p, pre, output) {
margin-block: 0;
}
</style>vue
<template>
<div class="demo-root-layout">
<AsamRadioGroup
:model-value="size"
v-bind="{ 'aria-label': 'size control' }"
class="mb-4"
@update:model-value="updatesize"
>
<AsamRadioButton value="large">large</AsamRadioButton>
<AsamRadioButton value="default">default</AsamRadioButton>
<AsamRadioButton value="small">small</AsamRadioButton>
</AsamRadioGroup>
<div class="demo-date-picker demo-layout-1">
<div class="block">
<span class="demonstration">默认</span>
<AsamDatePicker
v-model="value1"
value-format=""
type="daterange"
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
:size="size"
/>
</div>
<div class="block">
<span class="demonstration">带快捷选项</span>
<AsamDatePicker
v-model="value2"
value-format=""
type="daterange"
unlink-panels
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
:shortcuts="shortcuts"
:size="size"
/>
</div>
</div>
</div>
</template>
<script setup>
import { AsamRadioGroup, AsamRadioButton, AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatepickerdaterangeExample' });
import { ref } from 'vue';
const size = ref('default');
const value1 = ref('');
const value2 = ref('');
const shortcuts = [
{
text: '最近一周',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
}
},
{
text: '最近一个月',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
}
},
{
text: 'Last 3 months',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
}
}
];
function updatesize(value) {
if (value === 'large' || value === 'default' || value === 'small') size.value = value;
}
</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-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 1.5rem 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 400px;
display: flex;
flex-direction: column;
align-items: center;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
}
@media screen and (width <= 1200px) {
.demo-date-picker .block {
flex: 0 0 100%;
padding: 1rem 0;
min-width: auto;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.mb-4 {
margin-bottom: var(--asam-space-lg);
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>
<style scoped>
.demo-root-layout {
display: flex;
gap: var(--asam-space-md);
flex-wrap: wrap;
align-items: center;
}
.demo-root-layout > :is(p, pre, output) {
margin-block: 0;
}
</style>
月份范围
月份范围
vue
<template>
<div class="demo-date-picker demo-layout-1">
<div class="block">
<span class="demonstration">默认</span>
<AsamDatePicker
v-model="value1"
value-format=""
type="monthrange"
range-separator="To"
start-placeholder="Start month"
end-placeholder="End month"
/>
</div>
<div class="block">
<span class="demonstration">带快捷选项</span>
<AsamDatePicker
v-model="value2"
value-format=""
type="monthrange"
unlink-panels
range-separator="To"
start-placeholder="Start month"
end-placeholder="End month"
:shortcuts="shortcuts"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import type { AsamDateValue } from '@asam-ui/ui';
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatepickermonthrangeExample' });
import { ref } from 'vue';
const value1 = ref<AsamDateValue>('');
const value2 = ref<AsamDateValue>('');
const shortcuts = [
{
text: '本月',
value: [new Date(), new Date()]
},
{
text: '今年',
value: () => {
const end = new Date();
const start = new Date(new Date().getFullYear(), 0);
return [start, end];
}
},
{
text: 'Last 6 months',
value: () => {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 6);
return [start, end];
}
}
];
</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-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 1.5rem 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 300px;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
}
@media screen and (width <= 768px) {
.demo-date-picker .block {
flex: 0 0 100%;
padding: 1rem 0;
min-width: auto;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>vue
<template>
<div class="demo-date-picker demo-layout-1">
<div class="block">
<span class="demonstration">默认</span>
<AsamDatePicker
v-model="value1"
value-format=""
type="monthrange"
range-separator="To"
start-placeholder="Start month"
end-placeholder="End month"
/>
</div>
<div class="block">
<span class="demonstration">带快捷选项</span>
<AsamDatePicker
v-model="value2"
value-format=""
type="monthrange"
unlink-panels
range-separator="To"
start-placeholder="Start month"
end-placeholder="End month"
:shortcuts="shortcuts"
/>
</div>
</div>
</template>
<script setup>
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatepickermonthrangeExample' });
import { ref } from 'vue';
const value1 = ref('');
const value2 = ref('');
const shortcuts = [
{
text: '本月',
value: [new Date(), new Date()]
},
{
text: '今年',
value: () => {
const end = new Date();
const start = new Date(new Date().getFullYear(), 0);
return [start, end];
}
},
{
text: 'Last 6 months',
value: () => {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 6);
return [start, end];
}
}
];
</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-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 1.5rem 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 300px;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
}
@media screen and (width <= 768px) {
.demo-date-picker .block {
flex: 0 0 100%;
padding: 1rem 0;
min-width: auto;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>
年份范围
年份范围
vue
<template>
<div class="demo-date-picker demo-layout-1">
<div class="block">
<span class="demonstration">默认</span>
<AsamDatePicker
v-model="value1"
value-format=""
type="yearrange"
range-separator="To"
start-placeholder="Start Year"
end-placeholder="End Year"
/>
</div>
<div class="block">
<span class="demonstration">带快捷选项</span>
<AsamDatePicker
v-model="value2"
value-format=""
type="yearrange"
unlink-panels
range-separator="To"
start-placeholder="Start Year"
end-placeholder="End Year"
:shortcuts="shortcuts"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import type { AsamDateValue } from '@asam-ui/ui';
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatepickeryearrangeExample' });
import { ref } from 'vue';
const value1 = ref<AsamDateValue>();
const value2 = ref<AsamDateValue>();
const shortcuts = [
{
text: '今年',
value: [new Date(), new Date()]
},
{
text: 'Last 10 years',
value: () => {
const end = new Date();
const start = new Date(new Date().setFullYear(new Date().getFullYear() - 10));
return [start, end];
}
},
{
text: 'Next 50 years',
value: () => {
const start = new Date();
const end = new Date(new Date().setFullYear(new Date().getFullYear() + 50));
return [start, end];
}
}
];
</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-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 1.5rem 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 300px;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
}
@media screen and (width <= 768px) {
.demo-date-picker .block {
flex: 0 0 100%;
padding: 1rem 0;
min-width: auto;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>vue
<template>
<div class="demo-date-picker demo-layout-1">
<div class="block">
<span class="demonstration">默认</span>
<AsamDatePicker
v-model="value1"
value-format=""
type="yearrange"
range-separator="To"
start-placeholder="Start Year"
end-placeholder="End Year"
/>
</div>
<div class="block">
<span class="demonstration">带快捷选项</span>
<AsamDatePicker
v-model="value2"
value-format=""
type="yearrange"
unlink-panels
range-separator="To"
start-placeholder="Start Year"
end-placeholder="End Year"
:shortcuts="shortcuts"
/>
</div>
</div>
</template>
<script setup>
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatepickeryearrangeExample' });
import { ref } from 'vue';
const value1 = ref();
const value2 = ref();
const shortcuts = [
{
text: '今年',
value: [new Date(), new Date()]
},
{
text: 'Last 10 years',
value: () => {
const end = new Date();
const start = new Date(new Date().setFullYear(new Date().getFullYear() - 10));
return [start, end];
}
},
{
text: 'Next 50 years',
value: () => {
const start = new Date();
const end = new Date(new Date().setFullYear(new Date().getFullYear() + 50));
return [start, end];
}
}
];
</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-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 1.5rem 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 300px;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
}
@media screen and (width <= 768px) {
.demo-date-picker .block {
flex: 0 0 100%;
padding: 1rem 0;
min-width: auto;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>
季度范围
季度范围
vue
<template>
<div class="demo-date-picker demo-layout-1">
<div class="block">
<span class="demonstration">默认</span>
<AsamDatePicker
v-model="value1"
value-format=""
type="quarterrange"
range-separator="To"
start-placeholder="Start quarter"
end-placeholder="End quarter"
/>
</div>
<div class="block">
<span class="demonstration">带快捷选项</span>
<AsamDatePicker
v-model="value2"
value-format=""
type="quarterrange"
unlink-panels
range-separator="To"
start-placeholder="Start quarter"
end-placeholder="End quarter"
:shortcuts="shortcuts"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import type { AsamDateValue } from '@asam-ui/ui';
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatepickerquarterrangeExample' });
import { ref } from 'vue';
const value1 = ref<AsamDateValue>();
const value2 = ref<AsamDateValue>();
const shortcuts = [
{
text: '本季度',
value: () => {
const now = new Date();
const quarter = Math.floor(now.getMonth() / 3);
const start = new Date(now.getFullYear(), quarter * 3, 1);
return [start, now];
}
},
{
text: 'Last 4 quarters',
value: () => {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 12);
return [start, end];
}
},
{
text: 'Next 8 quarters',
value: () => {
const start = new Date();
const end = new Date();
end.setMonth(end.getMonth() + 24);
return [start, end];
}
}
];
</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-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 1.5rem 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 300px;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
}
@media screen and (width <= 768px) {
.demo-date-picker .block {
flex: 0 0 100%;
padding: 1rem 0;
min-width: auto;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>vue
<template>
<div class="demo-date-picker demo-layout-1">
<div class="block">
<span class="demonstration">默认</span>
<AsamDatePicker
v-model="value1"
value-format=""
type="quarterrange"
range-separator="To"
start-placeholder="Start quarter"
end-placeholder="End quarter"
/>
</div>
<div class="block">
<span class="demonstration">带快捷选项</span>
<AsamDatePicker
v-model="value2"
value-format=""
type="quarterrange"
unlink-panels
range-separator="To"
start-placeholder="Start quarter"
end-placeholder="End quarter"
:shortcuts="shortcuts"
/>
</div>
</div>
</template>
<script setup>
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatepickerquarterrangeExample' });
import { ref } from 'vue';
const value1 = ref();
const value2 = ref();
const shortcuts = [
{
text: '本季度',
value: () => {
const now = new Date();
const quarter = Math.floor(now.getMonth() / 3);
const start = new Date(now.getFullYear(), quarter * 3, 1);
return [start, now];
}
},
{
text: 'Last 4 quarters',
value: () => {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 12);
return [start, end];
}
},
{
text: 'Next 8 quarters',
value: () => {
const start = new Date();
const end = new Date();
end.setMonth(end.getMonth() + 24);
return [start, end];
}
}
];
</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-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 1.5rem 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 300px;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
}
@media screen and (width <= 768px) {
.demo-date-picker .block {
flex: 0 0 100%;
padding: 1rem 0;
min-width: auto;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>
单面板
单面板
vue
<template>
<div class="demo-date-picker demo-layout-1">
<div class="block">
<span class="demonstration">日期范围</span>
<!-- prettier-ignore -->
<AsamDatePicker
v-model="value1"
value-format=""
type="daterange"
single-panel
/>
</div>
<div class="block">
<span class="demonstration">月份范围</span>
<!-- prettier-ignore -->
<AsamDatePicker
v-model="value2"
value-format=""
type="monthrange"
single-panel
/>
</div>
<div class="block">
<span class="demonstration">年份范围</span>
<!-- prettier-ignore -->
<AsamDatePicker
v-model="value3"
value-format=""
type="yearrange"
single-panel
/>
</div>
<div class="block">
<span class="demonstration">季度范围</span>
<!-- prettier-ignore -->
<AsamDatePicker
v-model="value4"
value-format=""
type="quarterrange"
single-panel
/>
</div>
</div>
</template>
<script lang="ts" setup>
import type { AsamDateValue } from '@asam-ui/ui';
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatepickersinglepanelExample' });
import { ref } from 'vue';
const value1 = ref<AsamDateValue>();
const value2 = ref<AsamDateValue>();
const value3 = ref<AsamDateValue>();
const value4 = ref<AsamDateValue>();
</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-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 1.5rem 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 300px;
display: flex;
flex-direction: column;
align-items: center;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .block :deep(.el-date-editor) {
width: 300px;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
width: 100%;
}
@media screen and (width <= 1200px) {
.demo-date-picker .block {
flex: 0 0 50%;
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker .block:nth-child(2n) {
border-right: none;
}
.demo-date-picker .block:nth-last-child(-n + 2):nth-child(2n + 1),
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
@media screen and (width <= 768px) {
.demo-date-picker .block {
flex: 0 0 100%;
padding: 1rem 0;
min-width: auto;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>vue
<template>
<div class="demo-date-picker demo-layout-1">
<div class="block">
<span class="demonstration">日期范围</span>
<!-- prettier-ignore -->
<AsamDatePicker
v-model="value1"
value-format=""
type="daterange"
single-panel
/>
</div>
<div class="block">
<span class="demonstration">月份范围</span>
<!-- prettier-ignore -->
<AsamDatePicker
v-model="value2"
value-format=""
type="monthrange"
single-panel
/>
</div>
<div class="block">
<span class="demonstration">年份范围</span>
<!-- prettier-ignore -->
<AsamDatePicker
v-model="value3"
value-format=""
type="yearrange"
single-panel
/>
</div>
<div class="block">
<span class="demonstration">季度范围</span>
<!-- prettier-ignore -->
<AsamDatePicker
v-model="value4"
value-format=""
type="quarterrange"
single-panel
/>
</div>
</div>
</template>
<script setup>
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatepickersinglepanelExample' });
import { ref } from 'vue';
const value1 = ref();
const value2 = ref();
const value3 = ref();
const value4 = 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. */
.demo-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 1.5rem 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 300px;
display: flex;
flex-direction: column;
align-items: center;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .block :deep(.el-date-editor) {
width: 300px;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
width: 100%;
}
@media screen and (width <= 1200px) {
.demo-date-picker .block {
flex: 0 0 50%;
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker .block:nth-child(2n) {
border-right: none;
}
.demo-date-picker .block:nth-last-child(-n + 2):nth-child(2n + 1),
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
@media screen and (width <= 768px) {
.demo-date-picker .block {
flex: 0 0 100%;
padding: 1rem 0;
min-width: auto;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>
默认面板日期
默认面板日期
vue
<template>
<div class="demo-date-picker demo-layout-1">
<div class="block">
<span class="demonstration">date</span>
<AsamDatePicker
v-model="value1"
value-format=""
type="date"
placeholder="选择日期"
:default-value="new Date(2010, 9, 1)"
/>
</div>
<div class="block">
<span class="demonstration">daterange</span>
<AsamDatePicker
v-model="value2"
value-format=""
type="daterange"
start-placeholder="Start Date"
end-placeholder="End Date"
:default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import type { AsamDateValue } from '@asam-ui/ui';
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatepickerdefaultvalueExample' });
import { ref } from 'vue';
const value1 = ref<AsamDateValue>('');
const value2 = ref<AsamDateValue>('');
</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-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 1.5rem 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 300px;
display: flex;
flex-direction: column;
align-items: center;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
}
@media screen and (width <= 768px) {
.demo-date-picker .block {
flex: 0 0 100%;
padding: 1rem 0;
min-width: auto;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>vue
<template>
<div class="demo-date-picker demo-layout-1">
<div class="block">
<span class="demonstration">date</span>
<AsamDatePicker
v-model="value1"
value-format=""
type="date"
placeholder="选择日期"
:default-value="new Date(2010, 9, 1)"
/>
</div>
<div class="block">
<span class="demonstration">daterange</span>
<AsamDatePicker
v-model="value2"
value-format=""
type="daterange"
start-placeholder="Start Date"
end-placeholder="End Date"
:default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
/>
</div>
</div>
</template>
<script setup>
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatepickerdefaultvalueExample' });
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. */
.demo-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 1.5rem 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 300px;
display: flex;
flex-direction: column;
align-items: center;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
}
@media screen and (width <= 768px) {
.demo-date-picker .block {
flex: 0 0 100%;
padding: 1rem 0;
min-width: auto;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>
日期格式
日期格式
vue
<template>
<div class="demo-date-picker demo-layout-1">
<div class="block">
<span class="demonstration">返回 Date 对象</span>
<div class="demonstration">值： {{ value1 }}</div>
<AsamDatePicker
v-model="value1"
value-format=""
type="date"
placeholder="选择日期"
format="YYYY/MM/DD"
/>
</div>
<div class="block">
<span class="demonstration">使用 value-format</span>
<div class="demonstration">值：{{ value2 }}</div>
<AsamDatePicker
v-model="value2"
type="date"
placeholder="选择日期"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
/>
</div>
<div class="block">
<span class="demonstration">时间戳</span>
<div class="demonstration">值：{{ value3 }}</div>
<AsamDatePicker
v-model="value3"
type="date"
placeholder="选择日期"
format="YYYY/MM/DD"
value-format="x"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import type { AsamDateValue } from '@asam-ui/ui';
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatepickerdateformatsExample' });
import { ref } from 'vue';
const value1 = ref<AsamDateValue>('');
const value2 = ref<AsamDateValue>('');
const value3 = ref<AsamDateValue>('');
</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-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 1.5rem 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 300px;
display: flex;
flex-direction: column;
align-items: center;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
width: 100%;
}
@media screen and (width <= 1200px) {
.demo-date-picker .block {
flex: 0 0 50%;
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker .block:nth-child(2n) {
border-right: none;
}
.demo-date-picker .block:nth-last-child(-n + 2):nth-child(2n + 1),
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
@media screen and (width <= 768px) {
.demo-date-picker .block {
flex: 0 0 100%;
padding: 1rem 0;
min-width: auto;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>vue
<template>
<div class="demo-date-picker demo-layout-1">
<div class="block">
<span class="demonstration">返回 Date 对象</span>
<div class="demonstration">值： {{ value1 }}</div>
<AsamDatePicker
v-model="value1"
value-format=""
type="date"
placeholder="选择日期"
format="YYYY/MM/DD"
/>
</div>
<div class="block">
<span class="demonstration">使用 value-format</span>
<div class="demonstration">值：{{ value2 }}</div>
<AsamDatePicker
v-model="value2"
type="date"
placeholder="选择日期"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
/>
</div>
<div class="block">
<span class="demonstration">时间戳</span>
<div class="demonstration">值：{{ value3 }}</div>
<AsamDatePicker
v-model="value3"
type="date"
placeholder="选择日期"
format="YYYY/MM/DD"
value-format="x"
/>
</div>
</div>
</template>
<script setup>
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatepickerdateformatsExample' });
import { ref } from 'vue';
const value1 = ref('');
const value2 = ref('');
const value3 = 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. */
.demo-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 1.5rem 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 300px;
display: flex;
flex-direction: column;
align-items: center;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
width: 100%;
}
@media screen and (width <= 1200px) {
.demo-date-picker .block {
flex: 0 0 50%;
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker .block:nth-child(2n) {
border-right: none;
}
.demo-date-picker .block:nth-last-child(-n + 2):nth-child(2n + 1),
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
@media screen and (width <= 768px) {
.demo-date-picker .block {
flex: 0 0 100%;
padding: 1rem 0;
min-width: auto;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker .block:last-child {
border-bottom: none;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>
默认时间
默认时间
vue
<template>
<div class="demo-date-picker">
<div class="block">
<p class="example-paragraph">组件值：{{ value }}</p>
<AsamDatePicker
v-model="value"
type="daterange"
start-placeholder="Start date"
end-placeholder="End date"
value-format="YYYY-MM-DD HH:mm:ss"
:default-time="defaultTime"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import type { AsamDateValue } from '@asam-ui/ui';
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatepickerdefaulttimeExample' });
import { ref } from 'vue';
const value = ref<AsamDateValue>('');
const defaultTime = ref<[Date, Date]>([
new Date(2000, 1, 1, 0, 0, 0),
new Date(2000, 2, 1, 23, 59, 59)
]);
</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-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
}
.demo-date-picker .block:last-child {
border-right: none;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<template>
<div class="demo-date-picker">
<div class="block">
<p class="example-paragraph">组件值：{{ value }}</p>
<AsamDatePicker
v-model="value"
type="daterange"
start-placeholder="Start date"
end-placeholder="End date"
value-format="YYYY-MM-DD HH:mm:ss"
:default-time="defaultTime"
/>
</div>
</div>
</template>
<script setup>
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatepickerdefaulttimeExample' });
import { ref } from 'vue';
const value = ref('');
const defaultTime = ref([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]);
</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-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
}
.demo-date-picker .block:last-child {
border-right: none;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>
自定义前缀图标
自定义前缀图标
vue
<template>
<div class="demo-date-picker">
<div class="block">
<span class="demonstration">设置 prefix-icon</span>
<AsamDatePicker
v-model="value1"
value-format=""
type="date"
placeholder="选择日期"
:prefix-icon="customPrefix"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import type { AsamDateValue } from '@asam-ui/ui';
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatepickercustomprefixiconExample' });
import { h, ref, shallowRef } from 'vue';
const value1 = ref<AsamDateValue>('');
const customPrefix = shallowRef({
render() {
return h('p', 'pre');
}
});
</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-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
</style>vue
<template>
<div class="demo-date-picker">
<div class="block">
<span class="demonstration">设置 prefix-icon</span>
<AsamDatePicker
v-model="value1"
value-format=""
type="date"
placeholder="选择日期"
:prefix-icon="customPrefix"
/>
</div>
</div>
</template>
<script setup>
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatepickercustomprefixiconExample' });
import { h, ref, shallowRef } from 'vue';
const value1 = ref('');
const customPrefix = shallowRef({
render() {
return h('p', 'pre');
}
});
</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-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
</style>
自定义内容
自定义内容
vue
<template>
<div class="demo-date-picker">
<!-- prettier-ignore -->
<AsamDatePicker
v-model="value"
type="date"
placeholder="选择日期"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
>
<template #default="cell">
<div class="cell" :class="{ current: cell.isCurrent }">
<span class="text">{{ cell.text }}</span>
<span v-if="isHoliday(cell)" class="holiday" />
</div>
</template>
</AsamDatePicker>
<!-- prettier-ignore -->
<AsamDatePicker
v-model="month"
value-format=""
type="month"
placeholder="选择月份"
>
<template #default="cell">
<div class="el-date-table-cell" :class="{ current: cell.isCurrent }">
<span class="el-date-table-cell__text">{{ (cell.text ?? 0) + 1 }}期</span>
</div>
</template>
</AsamDatePicker>
<!-- prettier-ignore -->
<AsamDatePicker
v-model="year"
value-format=""
type="year"
placeholder="选择年份"
>
<template #default="cell">
<div class="el-date-table-cell" :class="{ current: cell.isCurrent }">
<span class="el-date-table-cell__text">{{ (cell.text ?? 0) + 1 }}y</span>
</div>
</template>
</AsamDatePicker>
<!-- prettier-ignore -->
<AsamDatePicker
v-model="quarter"
value-format=""
type="quarter"
placeholder="选择季度"
>
<template #default="cell">
<div class="el-date-table-cell" :class="{ current: cell.isCurrent }">
<span class="el-date-table-cell__text">Q{{ +(cell.text ?? 0) + 1 }}</span>
</div>
</template>
</AsamDatePicker>
</div>
</template>
<script lang="ts" setup>
import type { AsamDateValue } from '@asam-ui/ui';
import { AsamDatePicker } from '@asam-ui/ui';
import type { AsamDatePickerSlots } from '@asam-ui/ui';
type DateCell = Parameters<NonNullable<AsamDatePickerSlots['default']>>[0];
defineOptions({ name: 'AsamDatePickerofficialdatepickercustomcontentExample' });
import { ref } from 'vue';
const value = ref<AsamDateValue>('2021-10-29');
const month = ref<AsamDateValue>('');
const year = ref<AsamDateValue>('');
const quarter = ref<AsamDateValue>('');
const holidays = [
'2021-10-01',
'2021-10-02',
'2021-10-03',
'2021-10-04',
'2021-10-05',
'2021-10-06',
'2021-10-07'
];
const isHoliday = ({ dayjs }: DateCell) => {
return dayjs ? holidays.includes(dayjs.format('YYYY-MM-DD')) : false;
};
</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-date-picker {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.demo-date-picker > * {
margin: 0 !important;
}
.cell {
height: 30px;
padding: 3px 0;
box-sizing: border-box;
}
.cell .text {
width: 24px;
height: 24px;
display: block;
margin: 0 auto;
line-height: 24px;
position: absolute;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
}
.cell.current .text {
background: #626aef;
color: #fff;
}
.cell .holiday {
position: absolute;
width: 6px;
height: 6px;
background: var(--el-color-danger);
border-radius: 50%;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
@media screen and (width <= 768px) {
.demo-date-picker {
gap: 1.5rem;
}
}
</style>vue
<template>
<div class="demo-date-picker">
<!-- prettier-ignore -->
<AsamDatePicker
v-model="value"
type="date"
placeholder="选择日期"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
>
<template #default="cell">
<div class="cell" :class="{ current: cell.isCurrent }">
<span class="text">{{ cell.text }}</span>
<span v-if="isHoliday(cell)" class="holiday" />
</div>
</template>
</AsamDatePicker>
<!-- prettier-ignore -->
<AsamDatePicker
v-model="month"
value-format=""
type="month"
placeholder="选择月份"
>
<template #default="cell">
<div class="el-date-table-cell" :class="{ current: cell.isCurrent }">
<span class="el-date-table-cell__text">{{ (cell.text ?? 0) + 1 }}期</span>
</div>
</template>
</AsamDatePicker>
<!-- prettier-ignore -->
<AsamDatePicker
v-model="year"
value-format=""
type="year"
placeholder="选择年份"
>
<template #default="cell">
<div class="el-date-table-cell" :class="{ current: cell.isCurrent }">
<span class="el-date-table-cell__text">{{ (cell.text ?? 0) + 1 }}y</span>
</div>
</template>
</AsamDatePicker>
<!-- prettier-ignore -->
<AsamDatePicker
v-model="quarter"
value-format=""
type="quarter"
placeholder="选择季度"
>
<template #default="cell">
<div class="el-date-table-cell" :class="{ current: cell.isCurrent }">
<span class="el-date-table-cell__text">Q{{ +(cell.text ?? 0) + 1 }}</span>
</div>
</template>
</AsamDatePicker>
</div>
</template>
<script setup>
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatepickercustomcontentExample' });
import { ref } from 'vue';
const value = ref('2021-10-29');
const month = ref('');
const year = ref('');
const quarter = ref('');
const holidays = [
'2021-10-01',
'2021-10-02',
'2021-10-03',
'2021-10-04',
'2021-10-05',
'2021-10-06',
'2021-10-07'
];
const isHoliday = ({ dayjs }) => {
return dayjs ? holidays.includes(dayjs.format('YYYY-MM-DD')) : false;
};
</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-date-picker {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.demo-date-picker > * {
margin: 0 !important;
}
.cell {
height: 30px;
padding: 3px 0;
box-sizing: border-box;
}
.cell .text {
width: 24px;
height: 24px;
display: block;
margin: 0 auto;
line-height: 24px;
position: absolute;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
}
.cell.current .text {
background: #626aef;
color: #fff;
}
.cell .holiday {
position: absolute;
width: 6px;
height: 6px;
background: var(--el-color-danger);
border-radius: 50%;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
@media screen and (width <= 768px) {
.demo-date-picker {
gap: 1.5rem;
}
}
</style>
自定义图标
自定义图标
vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="demo-date-picker-icon demo-layout-1">
<div class="block">
<div class="demonstration">date</div>
<AsamDatePicker
v-model="value1"
type="date"
placeholder="选择日期"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
>
<template #prev-month>
<AsamIcon><CaretLeft /></AsamIcon>
</template>
<template #next-month>
<AsamIcon><CaretRight /></AsamIcon>
</template>
<template #prev-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
<template #next-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
</AsamDatePicker>
</div>
<div class="block">
<div class="demonstration">日期范围</div>
<AsamDatePicker
v-model="value2"
type="daterange"
start-placeholder="Start date"
end-placeholder="End date"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
unlink-panels
>
<template #prev-month>
<AsamIcon><CaretLeft /></AsamIcon>
</template>
<template #next-month>
<AsamIcon><CaretRight /></AsamIcon>
</template>
<template #prev-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
<template #next-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
</AsamDatePicker>
</div>
<div class="block">
<div class="demonstration">月份范围</div>
<AsamDatePicker
v-model="value3"
type="monthrange"
start-placeholder="Start date"
end-placeholder="End date"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
unlink-panels
>
<template #prev-month>
<AsamIcon><CaretLeft /></AsamIcon>
</template>
<template #next-month>
<AsamIcon><CaretRight /></AsamIcon>
</template>
<template #prev-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
<template #next-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
</AsamDatePicker>
</div>
<div class="block">
<div class="demonstration">年份范围</div>
<AsamDatePicker
v-model="value4"
value-format=""
type="yearrange"
range-separator="To"
start-placeholder="Start Year"
end-placeholder="End Year"
>
<template #prev-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
<template #next-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
</AsamDatePicker>
</div>
<div class="block">
<div class="demonstration">季度范围</div>
<AsamDatePicker
v-model="value5"
value-format=""
type="quarterrange"
range-separator="To"
start-placeholder="Start quarter"
end-placeholder="End quarter"
>
<template #prev-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
<template #next-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
</AsamDatePicker>
</div>
</div>
</template>
<script lang="ts" setup>
import type { AsamDateValue } from '@asam-ui/ui';
import { AsamDatePicker, AsamIcon } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatepickercustomiconExample' });
import { ref } from 'vue';
import { CaretLeft, CaretRight } from '@asam-ui/icons-vue';
const value1 = ref<AsamDateValue>('');
const value2 = ref<AsamDateValue>('');
const value3 = ref<AsamDateValue>('');
const value4 = ref<AsamDateValue>('');
const value5 = ref<AsamDateValue>('');
</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-date-picker-icon {
display: grid;
width: 100%;
}
.demo-date-picker-icon .block {
padding: 1.5rem 1rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.demo-date-picker-icon .block :deep(.el-date-editor) {
width: 100%;
max-width: 360px;
}
.demo-date-picker-icon .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
width: 100%;
}
@media screen and (width >= 1201px) {
.demo-date-picker-icon {
grid-template-columns: repeat(6, 1fr);
}
.demo-date-picker-icon .block {
border-right: solid 1px var(--el-border-color);
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker-icon .block:nth-child(1),
.demo-date-picker-icon .block:nth-child(2) {
grid-column: span 3;
}
.demo-date-picker-icon .block:nth-child(2) {
border-right: none;
}
.demo-date-picker-icon .block:nth-child(3),
.demo-date-picker-icon .block:nth-child(4),
.demo-date-picker-icon .block:nth-child(5) {
grid-column: span 2;
border-bottom: none;
}
.demo-date-picker-icon .block:nth-child(5) {
border-right: none;
}
}
@media screen and (width >= 769px) and (width <= 1200px) {
.demo-date-picker-icon {
grid-template-columns: repeat(2, 1fr);
}
.demo-date-picker-icon .block {
grid-column: span 1;
border-right: solid 1px var(--el-border-color);
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker-icon .block:nth-child(2n) {
border-right: none;
}
.demo-date-picker-icon .block:nth-child(5) {
grid-column: span 2;
border-right: none;
border-bottom: none;
}
}
@media screen and (width <= 768px) {
.demo-date-picker-icon {
grid-template-columns: 1fr;
}
.demo-date-picker-icon .block {
grid-column: 1 / -1;
padding: 1rem 0;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker-icon .block:last-child {
border-bottom: none;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="demo-date-picker-icon demo-layout-1">
<div class="block">
<div class="demonstration">date</div>
<AsamDatePicker
v-model="value1"
type="date"
placeholder="选择日期"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
>
<template #prev-month>
<AsamIcon><CaretLeft /></AsamIcon>
</template>
<template #next-month>
<AsamIcon><CaretRight /></AsamIcon>
</template>
<template #prev-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
<template #next-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
</AsamDatePicker>
</div>
<div class="block">
<div class="demonstration">日期范围</div>
<AsamDatePicker
v-model="value2"
type="daterange"
start-placeholder="Start date"
end-placeholder="End date"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
unlink-panels
>
<template #prev-month>
<AsamIcon><CaretLeft /></AsamIcon>
</template>
<template #next-month>
<AsamIcon><CaretRight /></AsamIcon>
</template>
<template #prev-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
<template #next-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
</AsamDatePicker>
</div>
<div class="block">
<div class="demonstration">月份范围</div>
<AsamDatePicker
v-model="value3"
type="monthrange"
start-placeholder="Start date"
end-placeholder="End date"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
unlink-panels
>
<template #prev-month>
<AsamIcon><CaretLeft /></AsamIcon>
</template>
<template #next-month>
<AsamIcon><CaretRight /></AsamIcon>
</template>
<template #prev-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
<template #next-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
</AsamDatePicker>
</div>
<div class="block">
<div class="demonstration">年份范围</div>
<AsamDatePicker
v-model="value4"
value-format=""
type="yearrange"
range-separator="To"
start-placeholder="Start Year"
end-placeholder="End Year"
>
<template #prev-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
<template #next-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
</AsamDatePicker>
</div>
<div class="block">
<div class="demonstration">季度范围</div>
<AsamDatePicker
v-model="value5"
value-format=""
type="quarterrange"
range-separator="To"
start-placeholder="Start quarter"
end-placeholder="End quarter"
>
<template #prev-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
<template #next-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
</AsamDatePicker>
</div>
</div>
</template>
<script setup>
import { AsamDatePicker, AsamIcon } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatepickercustomiconExample' });
import { ref } from 'vue';
import { CaretLeft, CaretRight } from '@asam-ui/icons-vue';
const value1 = ref('');
const value2 = ref('');
const value3 = ref('');
const value4 = ref('');
const value5 = 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. */
.demo-date-picker-icon {
display: grid;
width: 100%;
}
.demo-date-picker-icon .block {
padding: 1.5rem 1rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.demo-date-picker-icon .block :deep(.el-date-editor) {
width: 100%;
max-width: 360px;
}
.demo-date-picker-icon .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 1rem;
width: 100%;
}
@media screen and (width >= 1201px) {
.demo-date-picker-icon {
grid-template-columns: repeat(6, 1fr);
}
.demo-date-picker-icon .block {
border-right: solid 1px var(--el-border-color);
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker-icon .block:nth-child(1),
.demo-date-picker-icon .block:nth-child(2) {
grid-column: span 3;
}
.demo-date-picker-icon .block:nth-child(2) {
border-right: none;
}
.demo-date-picker-icon .block:nth-child(3),
.demo-date-picker-icon .block:nth-child(4),
.demo-date-picker-icon .block:nth-child(5) {
grid-column: span 2;
border-bottom: none;
}
.demo-date-picker-icon .block:nth-child(5) {
border-right: none;
}
}
@media screen and (width >= 769px) and (width <= 1200px) {
.demo-date-picker-icon {
grid-template-columns: repeat(2, 1fr);
}
.demo-date-picker-icon .block {
grid-column: span 1;
border-right: solid 1px var(--el-border-color);
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker-icon .block:nth-child(2n) {
border-right: none;
}
.demo-date-picker-icon .block:nth-child(5) {
grid-column: span 2;
border-right: none;
border-bottom: none;
}
}
@media screen and (width <= 768px) {
.demo-date-picker-icon {
grid-template-columns: 1fr;
}
.demo-date-picker-icon .block {
grid-column: 1 / -1;
padding: 1rem 0;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.demo-date-picker-icon .block:last-child {
border-bottom: none;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>
日期与时间
日期与时间
vue
<template>
<div class="demo-datetime-picker demo-layout-1">
<div class="block">
<span class="demonstration">默认</span>
<AsamDatePicker
v-model="value1"
value-format=""
type="datetime"
placeholder="选择日期和时间"
/>
</div>
<div class="block">
<span class="demonstration">带快捷项</span>
<AsamDatePicker
v-model="value2"
value-format=""
type="datetime"
placeholder="选择日期和时间"
:shortcuts="shortcuts"
/>
</div>
<div class="block">
<span class="demonstration">带默认时间</span>
<AsamDatePicker
v-model="value3"
value-format=""
type="datetime"
placeholder="选择日期和时间"
:default-time="defaultTime"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import type { AsamDateValue } from '@asam-ui/ui';
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatetimepickerdateandtimeExample' });
import { ref } from 'vue';
const value1 = ref<AsamDateValue>('');
const value2 = ref<AsamDateValue>('');
const value3 = ref<AsamDateValue>('');
const defaultTime = new Date(2000, 1, 1, 12, 0, 0);
const shortcuts = [
{
text: 'Today',
value: new Date()
},
{
text: 'Yesterday',
value: () => {
const date = new Date();
date.setDate(date.getDate() - 1);
return date;
}
},
{
text: '一周前',
value: () => {
const date = new Date();
date.setDate(date.getDate() - 7);
return date;
}
}
];
</script>
<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-datetime-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-datetime-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 300px;
}
.demo-datetime-picker .block:last-child {
border-right: none;
}
.demo-datetime-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
@media (width <= 768px) {
.demo-datetime-picker .block {
flex: 100%;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.demo-datetime-picker .block:last-child {
border-bottom: none;
}
:deep(.el-date-editor.el-input) {
width: 100%;
}
:deep(.el-date-editor.el-input__wrapper) {
width: 100%;
max-width: 300px;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>vue
<template>
<div class="demo-datetime-picker demo-layout-1">
<div class="block">
<span class="demonstration">默认</span>
<AsamDatePicker
v-model="value1"
value-format=""
type="datetime"
placeholder="选择日期和时间"
/>
</div>
<div class="block">
<span class="demonstration">带快捷项</span>
<AsamDatePicker
v-model="value2"
value-format=""
type="datetime"
placeholder="选择日期和时间"
:shortcuts="shortcuts"
/>
</div>
<div class="block">
<span class="demonstration">带默认时间</span>
<AsamDatePicker
v-model="value3"
value-format=""
type="datetime"
placeholder="选择日期和时间"
:default-time="defaultTime"
/>
</div>
</div>
</template>
<script setup>
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatetimepickerdateandtimeExample' });
import { ref } from 'vue';
const value1 = ref('');
const value2 = ref('');
const value3 = ref('');
const defaultTime = new Date(2000, 1, 1, 12, 0, 0);
const shortcuts = [
{
text: 'Today',
value: new Date()
},
{
text: 'Yesterday',
value: () => {
const date = new Date();
date.setDate(date.getDate() - 1);
return date;
}
},
{
text: '一周前',
value: () => {
const date = new Date();
date.setDate(date.getDate() - 7);
return date;
}
}
];
</script>
<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-datetime-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-datetime-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 300px;
}
.demo-datetime-picker .block:last-child {
border-right: none;
}
.demo-datetime-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
@media (width <= 768px) {
.demo-datetime-picker .block {
flex: 100%;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.demo-datetime-picker .block:last-child {
border-bottom: none;
}
:deep(.el-date-editor.el-input) {
width: 100%;
}
:deep(.el-date-editor.el-input__wrapper) {
width: 100%;
max-width: 300px;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>
日期与时间格式
日期与时间格式
vue
<template>
<div class="demo-datetime-picker demo-layout-1">
<div class="block">
<span class="demonstration">返回 Date 对象</span>
<div class="demonstration">值： {{ value1 }}</div>
<AsamDatePicker
v-model="value1"
value-format=""
type="datetime"
placeholder="选择日期"
format="YYYY/MM/DD HH:mm:ss"
/>
</div>
<div class="block">
<span class="demonstration">使用 value-format</span>
<div class="demonstration">值：{{ value2 }}</div>
<AsamDatePicker
v-model="value2"
type="datetime"
placeholder="选择日期"
format="YYYY/MM/DD hh:mm:ss"
value-format="YYYY-MM-DD h:m:s a"
/>
</div>
<div class="block">
<span class="demonstration">时间戳</span>
<div class="demonstration">值：{{ value3 }}</div>
<AsamDatePicker
v-model="value3"
type="datetime"
placeholder="选择日期"
format="YYYY/MM/DD hh:mm:ss"
value-format="x"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import type { AsamDateValue } from '@asam-ui/ui';
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatetimepickerdateandtimeformatsExample' });
import { ref } from 'vue';
const value1 = ref<AsamDateValue>('');
const value2 = ref<AsamDateValue>('');
const value3 = ref<AsamDateValue>('');
</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-datetime-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-datetime-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 300px;
}
.demo-datetime-picker .block:last-child {
border-right: none;
}
.demo-datetime-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
@media (width <= 768px) {
.demo-datetime-picker .block {
flex: 100%;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.demo-datetime-picker .block:last-child {
border-bottom: none;
}
:deep(.el-date-editor.el-input) {
width: 100%;
}
:deep(.el-date-editor.el-input__wrapper) {
width: 100%;
max-width: 300px;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>vue
<template>
<div class="demo-datetime-picker demo-layout-1">
<div class="block">
<span class="demonstration">返回 Date 对象</span>
<div class="demonstration">值： {{ value1 }}</div>
<AsamDatePicker
v-model="value1"
value-format=""
type="datetime"
placeholder="选择日期"
format="YYYY/MM/DD HH:mm:ss"
/>
</div>
<div class="block">
<span class="demonstration">使用 value-format</span>
<div class="demonstration">值：{{ value2 }}</div>
<AsamDatePicker
v-model="value2"
type="datetime"
placeholder="选择日期"
format="YYYY/MM/DD hh:mm:ss"
value-format="YYYY-MM-DD h:m:s a"
/>
</div>
<div class="block">
<span class="demonstration">时间戳</span>
<div class="demonstration">值：{{ value3 }}</div>
<AsamDatePicker
v-model="value3"
type="datetime"
placeholder="选择日期"
format="YYYY/MM/DD hh:mm:ss"
value-format="x"
/>
</div>
</div>
</template>
<script setup>
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatetimepickerdateandtimeformatsExample' });
import { ref } from 'vue';
const value1 = ref('');
const value2 = ref('');
const value3 = 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. */
.demo-datetime-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-datetime-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 300px;
}
.demo-datetime-picker .block:last-child {
border-right: none;
}
.demo-datetime-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
@media (width <= 768px) {
.demo-datetime-picker .block {
flex: 100%;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.demo-datetime-picker .block:last-child {
border-bottom: none;
}
:deep(.el-date-editor.el-input) {
width: 100%;
}
:deep(.el-date-editor.el-input__wrapper) {
width: 100%;
max-width: 300px;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>
面板日期与时间格式
面板日期与时间格式
vue
<template>
<div class="demo-datetime-picker demo-layout-1">
<div class="block">
<AsamDatePicker
v-model="value1"
value-format=""
type="datetime"
placeholder="选择日期"
format="YYYY-MM-DD HH:mm:ss"
date-format="MMM DD, YYYY"
time-format="HH:mm"
/>
</div>
<div class="line" />
<div class="block">
<AsamDatePicker
v-model="value2"
value-format=""
type="datetimerange"
start-placeholder="Start date"
end-placeholder="End date"
format="YYYY-MM-DD HH:mm:ss"
date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import type { AsamDateValue } from '@asam-ui/ui';
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatetimepickerdateandtimeformatspanelExample' });
import { ref } from 'vue';
const value1 = ref<AsamDateValue>('');
const value2 = ref<AsamDateValue>('');
</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-datetime-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
justify-content: space-around;
align-items: stretch;
}
.demo-datetime-picker .block {
padding: 30px 0;
text-align: center;
min-width: 300px;
flex: 1;
}
.line {
width: 1px;
background-color: var(--el-border-color);
}
@media (width <= 768px) {
.demo-datetime-picker .block {
flex: 100%;
border-bottom: solid 1px var(--el-border-color);
}
.demo-datetime-picker .block:last-child {
border-bottom: none;
}
.line {
display: none;
}
:deep(.el-date-editor.el-input) {
width: 100%;
}
:deep(.el-date-editor.el-input__wrapper) {
width: 100%;
max-width: 300px;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>vue
<template>
<div class="demo-datetime-picker demo-layout-1">
<div class="block">
<AsamDatePicker
v-model="value1"
value-format=""
type="datetime"
placeholder="选择日期"
format="YYYY-MM-DD HH:mm:ss"
date-format="MMM DD, YYYY"
time-format="HH:mm"
/>
</div>
<div class="line" />
<div class="block">
<AsamDatePicker
v-model="value2"
value-format=""
type="datetimerange"
start-placeholder="Start date"
end-placeholder="End date"
format="YYYY-MM-DD HH:mm:ss"
date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss"
/>
</div>
</div>
</template>
<script setup>
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatetimepickerdateandtimeformatspanelExample' });
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. */
.demo-datetime-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
justify-content: space-around;
align-items: stretch;
}
.demo-datetime-picker .block {
padding: 30px 0;
text-align: center;
min-width: 300px;
flex: 1;
}
.line {
width: 1px;
background-color: var(--el-border-color);
}
@media (width <= 768px) {
.demo-datetime-picker .block {
flex: 100%;
border-bottom: solid 1px var(--el-border-color);
}
.demo-datetime-picker .block:last-child {
border-bottom: none;
}
.line {
display: none;
}
:deep(.el-date-editor.el-input) {
width: 100%;
}
:deep(.el-date-editor.el-input__wrapper) {
width: 100%;
max-width: 300px;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>
日期与时间范围
日期与时间范围
vue
<template>
<div class="demo-datetime-picker demo-layout-1">
<div class="block">
<span class="demonstration">默认</span>
<AsamDatePicker
v-model="value1"
value-format=""
type="datetimerange"
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
/>
</div>
<div class="block">
<span class="demonstration">带快捷项</span>
<AsamDatePicker
v-model="value2"
value-format=""
type="datetimerange"
:shortcuts="shortcuts"
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import type { AsamDateValue } from '@asam-ui/ui';
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatetimepickerdateandtimerangeExample' });
import { ref } from 'vue';
const value1 = ref<AsamDateValue>([new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)]);
const value2 = ref<AsamDateValue>('');
const shortcuts = [
{
text: '最近一周',
value: () => {
const end = new Date();
const start = new Date();
start.setDate(start.getDate() - 7);
return [start, end];
}
},
{
text: '最近一个月',
value: () => {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 1);
return [start, end];
}
},
{
text: 'Last 3 months',
value: () => {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 3);
return [start, end];
}
}
];
</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-datetime-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 300px;
}
.block:last-child {
border-right: none;
}
.block .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
@media (width <= 768px) {
.block {
flex: 100%;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.block:last-child {
border-bottom: none;
}
:deep(.el-date-editor.el-input) {
width: 100%;
}
:deep(.el-date-editor.el-input__wrapper) {
width: 100%;
max-width: 300px;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>vue
<template>
<div class="demo-datetime-picker demo-layout-1">
<div class="block">
<span class="demonstration">默认</span>
<AsamDatePicker
v-model="value1"
value-format=""
type="datetimerange"
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
/>
</div>
<div class="block">
<span class="demonstration">带快捷项</span>
<AsamDatePicker
v-model="value2"
value-format=""
type="datetimerange"
:shortcuts="shortcuts"
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
/>
</div>
</div>
</template>
<script setup>
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatetimepickerdateandtimerangeExample' });
import { ref } from 'vue';
const value1 = ref([new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)]);
const value2 = ref('');
const shortcuts = [
{
text: '最近一周',
value: () => {
const end = new Date();
const start = new Date();
start.setDate(start.getDate() - 7);
return [start, end];
}
},
{
text: '最近一个月',
value: () => {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 1);
return [start, end];
}
},
{
text: 'Last 3 months',
value: () => {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 3);
return [start, end];
}
}
];
</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-datetime-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 300px;
}
.block:last-child {
border-right: none;
}
.block .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
@media (width <= 768px) {
.block {
flex: 100%;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.block:last-child {
border-bottom: none;
}
:deep(.el-date-editor.el-input) {
width: 100%;
}
:deep(.el-date-editor.el-input__wrapper) {
width: 100%;
max-width: 300px;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>
单面板
单面板
vue
<template>
<div class="demo-date-picker">
<div class="block">
<span class="demonstration">single-panel</span>
<!-- prettier-ignore -->
<AsamDatePicker
v-model="value1"
value-format=""
type="datetimerange"
single-panel
/>
</div>
</div>
</template>
<script lang="ts" setup>
import type { AsamDateValue } from '@asam-ui/ui';
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatetimepickersinglepanelExample' });
import { ref } from 'vue';
const value1 = ref<AsamDateValue>();
</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-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
</style>vue
<template>
<div class="demo-date-picker">
<div class="block">
<span class="demonstration">single-panel</span>
<!-- prettier-ignore -->
<AsamDatePicker
v-model="value1"
value-format=""
type="datetimerange"
single-panel
/>
</div>
</div>
</template>
<script setup>
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatetimepickersinglepanelExample' });
import { ref } from 'vue';
const value1 = 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. */
.demo-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
</style>
默认时间
默认时间
vue
<template>
<div class="demo-datetime-picker demo-layout-1">
<div class="block">
<span class="demonstration">起止日期的默认时间均为 12:00:00</span>
<AsamDatePicker
v-model="value1"
value-format=""
type="datetimerange"
start-placeholder="Start Date"
end-placeholder="End Date"
:default-time="defaultTime1"
/>
</div>
<div class="block">
<span class="demonstration"> 开始默认时间为 12:00:00，结束为 08:00:00 </span>
<AsamDatePicker
v-model="value2"
value-format=""
type="datetimerange"
start-placeholder="Start Date"
end-placeholder="End Date"
:default-time="defaultTime2"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import type { AsamDateValue } from '@asam-ui/ui';
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatetimepickerdefaulttimeExample' });
import { ref } from 'vue';
const value1 = ref<AsamDateValue>('');
const value2 = ref<AsamDateValue>('');
const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00'
const defaultTime2: [Date, Date] = [new Date(2000, 1, 1, 12, 0, 0), new Date(2000, 2, 1, 8, 0, 0)]; // '12:00:00', '08:00:00'
</script>
<style scoped>
/* 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-datetime-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 300px;
}
.block:last-child {
border-right: none;
}
.block .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
@media (width <= 768px) {
.block {
flex: 100%;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.block:last-child {
border-bottom: none;
}
:deep(.el-date-editor.el-input) {
width: 100%;
}
:deep(.el-date-editor.el-input__wrapper) {
width: 100%;
max-width: 300px;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>vue
<template>
<div class="demo-datetime-picker demo-layout-1">
<div class="block">
<span class="demonstration">起止日期的默认时间均为 12:00:00</span>
<AsamDatePicker
v-model="value1"
value-format=""
type="datetimerange"
start-placeholder="Start Date"
end-placeholder="End Date"
:default-time="defaultTime1"
/>
</div>
<div class="block">
<span class="demonstration"> 开始默认时间为 12:00:00，结束为 08:00:00 </span>
<AsamDatePicker
v-model="value2"
value-format=""
type="datetimerange"
start-placeholder="Start Date"
end-placeholder="End Date"
:default-time="defaultTime2"
/>
</div>
</div>
</template>
<script setup>
import { AsamDatePicker } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatetimepickerdefaulttimeExample' });
import { ref } from 'vue';
const value1 = ref('');
const value2 = ref('');
const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00'
const defaultTime2 = [new Date(2000, 1, 1, 12, 0, 0), new Date(2000, 2, 1, 8, 0, 0)]; // '12:00:00', '08:00:00'
</script>
<style scoped>
/* 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-datetime-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
min-width: 300px;
}
.block:last-child {
border-right: none;
}
.block .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
@media (width <= 768px) {
.block {
flex: 100%;
border-right: none;
border-bottom: solid 1px var(--el-border-color);
}
.block:last-child {
border-bottom: none;
}
:deep(.el-date-editor.el-input) {
width: 100%;
}
:deep(.el-date-editor.el-input__wrapper) {
width: 100%;
max-width: 300px;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>
自定义图标
自定义图标
vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="demo-datetime-picker-icon demo-layout-1">
<div class="block">
<AsamDatePicker
v-model="value1"
value-format=""
type="datetime"
placeholder="选择日期"
format="YYYY-MM-DD HH:mm:ss"
date-format="MMM DD, YYYY"
time-format="HH:mm"
>
<template #prev-month>
<AsamIcon><CaretLeft /></AsamIcon>
</template>
<template #next-month>
<AsamIcon><CaretRight /></AsamIcon>
</template>
<template #prev-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
<template #next-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
</AsamDatePicker>
</div>
<div class="line" />
<div class="block">
<AsamDatePicker
v-model="value2"
value-format=""
type="datetimerange"
start-placeholder="Start date"
end-placeholder="End date"
format="YYYY-MM-DD HH:mm:ss"
date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss"
unlink-panels
>
<template #prev-month>
<AsamIcon><CaretLeft /></AsamIcon>
</template>
<template #next-month>
<AsamIcon><CaretRight /></AsamIcon>
</template>
<template #prev-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
<template #next-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
</AsamDatePicker>
</div>
</div>
</template>
<script lang="ts" setup>
import type { AsamDateValue } from '@asam-ui/ui';
import { AsamDatePicker, AsamIcon } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatetimepickercustomiconExample' });
import { ref } from 'vue';
import { CaretLeft, CaretRight } from '@asam-ui/icons-vue';
const value1 = ref<AsamDateValue>('');
const value2 = ref<AsamDateValue>('');
</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-datetime-picker-icon {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
justify-content: space-around;
align-items: stretch;
}
.demo-datetime-picker-icon .block {
padding: 30px 0;
text-align: center;
min-width: 300px;
flex: 1;
}
.line {
width: 1px;
background-color: var(--el-border-color);
}
@media (width <= 768px) {
.demo-datetime-picker-icon .block {
flex: 100%;
border-bottom: solid 1px var(--el-border-color);
}
.demo-datetime-picker-icon .block:last-child {
border-bottom: none;
}
.line {
display: none;
}
:deep(.el-date-editor.el-input) {
width: 100%;
}
:deep(.el-date-editor.el-input__wrapper) {
width: 100%;
max-width: 300px;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="demo-datetime-picker-icon demo-layout-1">
<div class="block">
<AsamDatePicker
v-model="value1"
value-format=""
type="datetime"
placeholder="选择日期"
format="YYYY-MM-DD HH:mm:ss"
date-format="MMM DD, YYYY"
time-format="HH:mm"
>
<template #prev-month>
<AsamIcon><CaretLeft /></AsamIcon>
</template>
<template #next-month>
<AsamIcon><CaretRight /></AsamIcon>
</template>
<template #prev-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
<template #next-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
</AsamDatePicker>
</div>
<div class="line" />
<div class="block">
<AsamDatePicker
v-model="value2"
value-format=""
type="datetimerange"
start-placeholder="Start date"
end-placeholder="End date"
format="YYYY-MM-DD HH:mm:ss"
date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss"
unlink-panels
>
<template #prev-month>
<AsamIcon><CaretLeft /></AsamIcon>
</template>
<template #next-month>
<AsamIcon><CaretRight /></AsamIcon>
</template>
<template #prev-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
<template #next-year>
<AsamIcon>
<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="1" fill-rule="evenodd">
<g fill="currentColor">
<path
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
/>
</g>
</g>
</svg>
</AsamIcon>
</template>
</AsamDatePicker>
</div>
</div>
</template>
<script setup>
import { AsamDatePicker, AsamIcon } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerofficialdatetimepickercustomiconExample' });
import { ref } from 'vue';
import { CaretLeft, CaretRight } from '@asam-ui/icons-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. */
.demo-datetime-picker-icon {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
justify-content: space-around;
align-items: stretch;
}
.demo-datetime-picker-icon .block {
padding: 30px 0;
text-align: center;
min-width: 300px;
flex: 1;
}
.line {
width: 1px;
background-color: var(--el-border-color);
}
@media (width <= 768px) {
.demo-datetime-picker-icon .block {
flex: 100%;
border-bottom: solid 1px var(--el-border-color);
}
.demo-datetime-picker-icon .block:last-child {
border-bottom: none;
}
.line {
display: none;
}
:deep(.el-date-editor.el-input) {
width: 100%;
}
:deep(.el-date-editor.el-input__wrapper) {
width: 100%;
max-width: 300px;
}
}
</style>
<style scoped>
.demo-layout-1 {
gap: var(--asam-space-md);
}
</style>季度、回填与动态跨年约束
季度、回填与动态跨年约束
vue
<template>
<section class="demo-layout-1">
<AsamDatePicker
v-model="quarter"
type="quarter"
format="YYYY [年第] Q [季度]"
value-format="YYYY-[Q]Q"
:disabled-date="disabledDate"
:default-value="new Date(2026, 0, 1)"
:teleported="false"
@change="events.push('change: ' + $event)"
/>
<AsamDatePicker
v-model="quarters"
type="quarters"
value-format="YYYY-[Q]Q"
:show-footer="true"
:show-confirm="true"
/>
<AsamDatePicker
v-model="range"
type="quarterrange"
value-format="YYYY-[Q]Q"
:single-panel="singlePanel"
:unlink-panels="true"
:disabled-date="disabledDate"
:default-value="[new Date(2026, 0, 1), new Date(2027, 0, 1)]"
/>
<AsamButton
native-type="submit"
type="default"
@click="limitYear = limitYear === 2026 ? 2027 : 2026"
>
切换禁用年份 {{ limitYear }}
</AsamButton>
<AsamButton native-type="submit" type="default" @click="singlePanel = !singlePanel"
>单面板 {{ singlePanel }}</AsamButton
>
<AsamButton
native-type="submit"
type="default"
@click="
quarter = '2026-Q2';
quarters = ['2026-Q1', '2026-Q3'];
range = ['2026-Q4', '2027-Q2'];
"
>
回填跨年季度
</AsamButton>
<AsamButton
native-type="submit"
type="default"
@click="
quarter = null;
quarters = null;
range = null;
"
>
重置为空
</AsamButton>
<output>{{ { quarter, quarters, range, events } }}</output>
</section>
</template>
<script lang="ts" setup>
import type { AsamDateValue } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerquartercontractExample' });
import { ref } from 'vue';
import { AsamButton, AsamDatePicker } from '@asam-ui/ui';
const quarter = ref<AsamDateValue>(null);
const quarters = ref<AsamDateValue>(null);
const range = ref<AsamDateValue>(null);
const limitYear = ref(2026);
const singlePanel = ref(true);
const events = ref<string[]>([]);
const disabledDate = (date: Date) => date.getFullYear() < limitYear.value;
</script>
<style scoped>
.demo-layout-1 {
display: grid;
gap: var(--asam-space-md);
}
</style>vue
<template>
<section class="demo-layout-1">
<AsamDatePicker
v-model="quarter"
type="quarter"
format="YYYY [年第] Q [季度]"
value-format="YYYY-[Q]Q"
:disabled-date="disabledDate"
:default-value="new Date(2026, 0, 1)"
:teleported="false"
@change="events.push('change: ' + $event)"
/>
<AsamDatePicker
v-model="quarters"
type="quarters"
value-format="YYYY-[Q]Q"
:show-footer="true"
:show-confirm="true"
/>
<AsamDatePicker
v-model="range"
type="quarterrange"
value-format="YYYY-[Q]Q"
:single-panel="singlePanel"
:unlink-panels="true"
:disabled-date="disabledDate"
:default-value="[new Date(2026, 0, 1), new Date(2027, 0, 1)]"
/>
<AsamButton
native-type="submit"
type="default"
@click="limitYear = limitYear === 2026 ? 2027 : 2026"
>
切换禁用年份 {{ limitYear }}
</AsamButton>
<AsamButton native-type="submit" type="default" @click="singlePanel = !singlePanel"
>单面板 {{ singlePanel }}</AsamButton
>
<AsamButton
native-type="submit"
type="default"
@click="
quarter = '2026-Q2';
quarters = ['2026-Q1', '2026-Q3'];
range = ['2026-Q4', '2027-Q2'];
"
>
回填跨年季度
</AsamButton>
<AsamButton
native-type="submit"
type="default"
@click="
quarter = null;
quarters = null;
range = null;
"
>
重置为空
</AsamButton>
<output>{{ { quarter, quarters, range, events } }}</output>
</section>
</template>
<script setup>
defineOptions({ name: 'AsamDatePickerquartercontractExample' });
import { ref } from 'vue';
import { AsamButton, AsamDatePicker } from '@asam-ui/ui';
const quarter = ref(null);
const quarters = ref(null);
const range = ref(null);
const limitYear = ref(2026);
const singlePanel = ref(true);
const events = ref([]);
const disabledDate = (date) => date.getFullYear() < limitYear.value;
</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: 'AsamDatePickerAdvancedContractExample' },
__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: 'datetimerange',
singlePanel: true,
unlinkPanels: true,
automaticDropdown: false,
valueFormat: 'YYYY-MM-DD HH:mm:ss',
format: 'YYYY/MM/DD HH:mm',
teleported: false,
readonly: false,
clearable: true,
editable: true,
placeholder: '日期时间',
startPlaceholder: '起点',
endPlaceholder: '终点',
rangeSeparator: '到',
popperClass: 'advanced-date-popup',
popperStyle: { borderWidth: '2px' },
popperOptions: { strategy: 'absolute' },
placement: 'bottom',
fallbackPlacements: ['top', 'bottom'],
prefixIcon: icons_vue_1.CaretLeft,
clearIcon: icons_vue_1.CaretRight,
emptyValues: ['', null, undefined],
valueOnClear: null,
defaultValue: new Date(2026, 0, 1, 9, 30),
defaultTime: new Date(2000, 0, 1, 9, 30),
dateFormat: 'YYYY/MM/DD',
timeFormat: 'HH:mm',
showFooter: true,
showConfirm: true,
showWeekNumber: true,
disabledDate: (date?: any) => date.getFullYear() < 2026,
shortcuts: [{ text: '固定日期', value: new Date(2026, 0, 1, 9, 30) }],
cellClassName: (date?: any) => (date.getDate() === 1 ? 'advanced-cell' : ''),
disabledHours: () => [0, 1],
disabledMinutes: (hour?: any) => (hour === 9 ? [0] : []),
disabledSeconds: () => [0]
};
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("section", _hoisted_1, [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamCheckboxItem), {
modelValue: chinese.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((chinese).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(0, vue_2.createTextVNode)("中文本地化", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamCheckboxItem), {
modelValue: disabled.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event?: any) => ((disabled).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_2.createTextVNode)("禁用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamConfigProvider), {
locale: chinese.value ? (0, vue_2.unref)(locale_js_1.zhCn) : (0, vue_2.unref)(locale_js_1.en)
}, {
default: (0, vue_2.withCtx)(() => [
((0, vue_2.openBlock)(), (0, vue_2.createBlock)((0, vue_2.unref)(ui_1.AsamDatePicker), (0, vue_2.mergeProps)({
key: chinese.value ? 'zh-cn' : 'en',
modelValue: value.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event?: any) => ((value).value = $event))
}, configuration, {
disabled: disabled.value,
onChange: _cache[3] || (_cache[3] = ($event?: any) => (changes.value++))
}), {
default: (0, vue_2.withCtx)((cell?: any) => [
(0, vue_2.createCommentVNode)(" Scoped cell data stays typed through the public slot. "),
(0, vue_2.createElementVNode)("span", null, (0, vue_2.toDisplayString)(cell.text), 1 /* TEXT */)
]),
"prev-month": (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(icons_vue_1.CaretLeft))
]),
"next-month": (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(icons_vue_1.CaretRight))
]),
"prev-year": (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(icons_vue_1.CaretLeft))
]),
"next-year": (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(icons_vue_1.CaretRight))
]),
"range-separator": (0, vue_2.withCtx)(() => [...(_cache[6] || (_cache[6] = [
(0, vue_2.createTextVNode)("→", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 16 /* FULL_PROPS */, ["modelValue", "disabled"]))
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["locale"]),
(0, vue_2.createElementVNode)("output", null, "模型 " + (0, vue_2.toDisplayString)(value.value) + "；提交次数 " + (0, vue_2.toDisplayString)(changes.value), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-f94c2add";
},
"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-f94c2add] {
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: 'AsamDatePickerAdvancedContractExample' }, {
__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: 'datetimerange',
singlePanel: true,
unlinkPanels: true,
automaticDropdown: false,
valueFormat: 'YYYY-MM-DD HH:mm:ss',
format: 'YYYY/MM/DD HH:mm',
teleported: false,
readonly: false,
clearable: true,
editable: true,
placeholder: '日期时间',
startPlaceholder: '起点',
endPlaceholder: '终点',
rangeSeparator: '到',
popperClass: 'advanced-date-popup',
popperStyle: { borderWidth: '2px' },
popperOptions: { strategy: 'absolute' },
placement: 'bottom',
fallbackPlacements: ['top', 'bottom'],
prefixIcon: icons_vue_1.CaretLeft,
clearIcon: icons_vue_1.CaretRight,
emptyValues: ['', null, undefined],
valueOnClear: null,
defaultValue: new Date(2026, 0, 1, 9, 30),
defaultTime: new Date(2000, 0, 1, 9, 30),
dateFormat: 'YYYY/MM/DD',
timeFormat: 'HH:mm',
showFooter: true,
showConfirm: true,
showWeekNumber: true,
disabledDate: (date) => date.getFullYear() < 2026,
shortcuts: [{ text: '固定日期', value: new Date(2026, 0, 1, 9, 30) }],
cellClassName: (date) => (date.getDate() === 1 ? 'advanced-cell' : ''),
disabledHours: () => [0, 1],
disabledMinutes: (hour) => (hour === 9 ? [0] : []),
disabledSeconds: () => [0]
};
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("section", _hoisted_1, [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamCheckboxItem), {
modelValue: chinese.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((chinese).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(0, vue_1.createTextVNode)("中文本地化", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamCheckboxItem), {
modelValue: disabled.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((disabled).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_1.createTextVNode)("禁用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamConfigProvider), {
locale: chinese.value ? (0, vue_1.unref)(locale_js_1.zhCn) : (0, vue_1.unref)(locale_js_1.en)
}, {
default: (0, vue_1.withCtx)(() => [
((0, vue_1.openBlock)(), (0, vue_1.createBlock)((0, vue_1.unref)(ui_1.AsamDatePicker), (0, vue_1.mergeProps)({
key: chinese.value ? 'zh-cn' : 'en',
modelValue: value.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = $event => ((value).value = $event))
}, configuration, {
disabled: disabled.value,
onChange: _cache[3] || (_cache[3] = $event => (changes.value++))
}), {
default: (0, vue_1.withCtx)((cell) => [
(0, vue_1.createCommentVNode)(" Scoped cell data stays typed through the public slot. "),
(0, vue_1.createElementVNode)("span", null, (0, vue_1.toDisplayString)(cell.text), 1 /* TEXT */)
]),
"prev-month": (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(icons_vue_1.CaretLeft))
]),
"next-month": (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(icons_vue_1.CaretRight))
]),
"prev-year": (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(icons_vue_1.CaretLeft))
]),
"next-year": (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(icons_vue_1.CaretRight))
]),
"range-separator": (0, vue_1.withCtx)(() => [...(_cache[6] || (_cache[6] = [
(0, vue_1.createTextVNode)("→", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 16 /* FULL_PROPS */, ["modelValue", "disabled"]))
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["locale"]),
(0, vue_1.createElementVNode)("output", null, "模型 " + (0, vue_1.toDisplayString)(value.value) + "；提交次数 " + (0, vue_1.toDisplayString)(changes.value), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-a8bc77d8";
},
"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-a8bc77d8] {
display: grid;
gap: var(--asam-space-md);
}
</style>公开面板侧栏
sidebar 收到原生 class: string，把它绑定到侧栏根节点可保留布局。 完整说明。
快捷项与自定义侧栏各自渲染一个原生侧栏块；固定版本两块占用同一左侧区域，启用快捷项可能覆盖自定义侧栏内容。示例明确展示此原生组合行为，需要交互的自定义侧栏应关闭快捷项，或把自己的快捷操作放入同一自定义侧栏；ASAM 不额外改变原生几何布局。
公开侧栏与快捷项
原生清空配置与迁移
基础入口仅委托原生公开 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">
<AsamDatePicker
: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,
AsamDatePicker,
AsamConfigProvider
} from '@asam-ui/ui';
import type { AsamDateValue, AsamDatePickerProps } from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerEmptyValuesExample' });
const mode = ref('default');
const scope = ref('props');
const range = ref(false);
const value = ref<AsamDateValue>(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<AsamDatePickerProps, '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<AsamDatePickerProps>(() => ({
type: range.value ? 'datetimerange' : 'datetime',
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: mode.value === 'epoch' || mode.value === 'zero' ? 'x' : 'YYYY-MM-DD 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
? ['2026-01-12 09:30:00', '2026-01-14 17:30:00']
: '2026-01-12 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">
<AsamDatePicker
: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,
AsamDatePicker,
AsamConfigProvider
} from '@asam-ui/ui';
defineOptions({ name: 'AsamDatePickerEmptyValuesExample' });
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(() => ({
type: range.value ? 'datetimerange' : 'datetime',
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: mode.value === 'epoch' || mode.value === 'zero' ? 'x' : 'YYYY-MM-DD 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
? ['2026-01-12 09:30:00', '2026-01-14 17:30:00']
: '2026-01-12 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，自定义弹层样式需使用全局选择器。
弹层 ClassValue 与组合两端
vue
<template>
<section class="demo-layout-1">
<label>
<!-- Change the public configuration without recreating controls. -->
<span>类名形式</span>
<AsamSelect v-model="mode">
<AsamOption value="object" :label="'对象'">对象</AsamOption>
<AsamOption value="array" :label="'嵌套数组'">嵌套数组</AsamOption>
<AsamOption value="string" :label="'字符串'">字符串</AsamOption>
<AsamOption value="false" :label="'false'">false</AsamOption>
<AsamOption value="null" :label="'null'">null</AsamOption>
<AsamOption value="undefined" :label="'undefined'">undefined</AsamOption>
</AsamSelect></label
>
<label>
<!-- Change the public configuration without recreating controls. -->
<span>尺寸</span>
<AsamSelect v-model="size">
<AsamOption v-for="item in sizes" :key="item" :value="item" :label="item">{{
item
}}</AsamOption>
</AsamSelect></label
>
<AsamCheckboxItem v-model="enabled">启用自定义边框</AsamCheckboxItem>
<AsamCheckboxItem v-model="teleported">挂载到 body</AsamCheckboxItem>
<AsamDatePicker
v-model="date"
:popper-class="popperClass"
:size="size"
:teleported="teleported"
/>
<AsamTimePicker
v-model="time"
value-format="HH:mm:ss"
:popper-class="popperClass"
:size="size"
:teleported="teleported"
/>
<AsamDateTimePicker
v-model="legacy"
:popper-class="popperClass"
:size="size"
:teleported="teleported"
/>
<AsamDateTimeRangePicker
v-model="range"
:popper-class="popperClass"
:size="size"
:teleported="teleported"
/>
</section>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue';
import {
AsamSelect,
AsamOption,
AsamCheckboxItem,
AsamDatePicker,
AsamTimePicker,
AsamDateTimePicker,
AsamDateTimeRangePicker
} from '@asam-ui/ui';
import type {
AsamControlSize,
AsamDatePickerProps,
AsamDateValue,
AsamTimeValue,
DateTimeRangeValue
} from '@asam-ui/ui';
defineOptions({ name: 'AsamPickerClassValuesExample' });
const sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];
const size = ref<AsamControlSize>('big');
const enabled = ref(true);
const teleported = ref(true);
const mode = ref('object');
const date = ref<AsamDateValue>('2026-01-12');
const time = ref<AsamTimeValue>('09:30:00');
const legacy = ref<DateTimeRangeValue>(['2026-01-12 09:30:00', '2026-01-14 17:30:00']);
const range = ref<DateTimeRangeValue>(['2026-01-12 09:30:00', '2026-01-14 17:30:00']);
const popperClass = computed<AsamDatePickerProps['popperClass']>(() => {
const object = { 'asam-example-popup': enabled.value, 'asam-example-hidden': false };
if (mode.value === 'object') return object;
if (mode.value === 'array') return ['asam-example-array', [object, false]];
if (mode.value === 'string') return enabled.value ? 'asam-example-popup' : '';
if (mode.value === 'false') return false;
if (mode.value === 'null') return null;
return undefined;
});
</script>
<style>
.asam-example-popup {
outline: 2px solid var(--asam-color-primary);
}
</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">
<label>
<!-- Change the public configuration without recreating controls. -->
<span>类名形式</span>
<AsamSelect v-model="mode">
<AsamOption value="object" :label="'对象'">对象</AsamOption>
<AsamOption value="array" :label="'嵌套数组'">嵌套数组</AsamOption>
<AsamOption value="string" :label="'字符串'">字符串</AsamOption>
<AsamOption value="false" :label="'false'">false</AsamOption>
<AsamOption value="null" :label="'null'">null</AsamOption>
<AsamOption value="undefined" :label="'undefined'">undefined</AsamOption>
</AsamSelect></label
>
<label>
<!-- Change the public configuration without recreating controls. -->
<span>尺寸</span>
<AsamSelect v-model="size">
<AsamOption v-for="item in sizes" :key="item" :value="item" :label="item">{{
item
}}</AsamOption>
</AsamSelect></label
>
<AsamCheckboxItem v-model="enabled">启用自定义边框</AsamCheckboxItem>
<AsamCheckboxItem v-model="teleported">挂载到 body</AsamCheckboxItem>
<AsamDatePicker
v-model="date"
:popper-class="popperClass"
:size="size"
:teleported="teleported"
/>
<AsamTimePicker
v-model="time"
value-format="HH:mm:ss"
:popper-class="popperClass"
:size="size"
:teleported="teleported"
/>
<AsamDateTimePicker
v-model="legacy"
:popper-class="popperClass"
:size="size"
:teleported="teleported"
/>
<AsamDateTimeRangePicker
v-model="range"
:popper-class="popperClass"
:size="size"
:teleported="teleported"
/>
</section>
</template>
<script setup>
import { computed, ref } from 'vue';
import {
AsamSelect,
AsamOption,
AsamCheckboxItem,
AsamDatePicker,
AsamTimePicker,
AsamDateTimePicker,
AsamDateTimeRangePicker
} from '@asam-ui/ui';
defineOptions({ name: 'AsamPickerClassValuesExample' });
const sizes = ['large', 'big', 'default', 'small'];
const size = ref('big');
const enabled = ref(true);
const teleported = ref(true);
const mode = ref('object');
const date = ref('2026-01-12');
const time = ref('09:30:00');
const legacy = ref(['2026-01-12 09:30:00', '2026-01-14 17:30:00']);
const range = ref(['2026-01-12 09:30:00', '2026-01-14 17:30:00']);
const popperClass = computed(() => {
const object = { 'asam-example-popup': enabled.value, 'asam-example-hidden': false };
if (mode.value === 'object') return object;
if (mode.value === 'array') return ['asam-example-array', [object, false]];
if (mode.value === 'string') return enabled.value ? 'asam-example-popup' : '';
if (mode.value === 'false') return false;
if (mode.value === 'null') return null;
return undefined;
});
</script>
<style>
.asam-example-popup {
outline: 2px solid var(--asam-color-primary);
}
</style>
<style scoped>
.demo-layout-1 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-md);
}
</style>原生默认值与适配说明
type 为 date，format 按 type 决定，valueFormat 未设置时为 Date；modelValue 默认空字符串。 完整说明。
局部与全局浮层
基础示例使用默认的全局挂载；局部挂载示例展示显式配置的 teleported 或 appendTo。先打开控件浮层，再观察其所在容器。挂载位置与控件值、请求协议互相独立。
API
属性 AsamDatePickerProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
ariaLabel | — | string | undefined | — |
id | 等价于原生 input id 属性 | (AsamDatePickerProps)["id"] | — |
popperClass | DatePicker 下拉框的类名 | AsamDatePickerProps["popperClass"] | — |
popperStyle | 弹出内容的自定义样式 | (AsamDatePickerProps)["popperStyle"] | — |
fallbackPlacements | 提示浮层可采用的位置列表，参阅 Popper 的 fallbackPlacements。 | (AsamDatePickerProps)["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"完整类型：(AsamDatePickerProps)["placement"] | — |
popperOptions | 自定义浮层配置，参阅 Popper 文档。 | (AsamDatePickerProps)["popperOptions"] | — |
disabled | 禁用 | (AsamDatePickerProps)["disabled"] | false |
tabindex | — | (AsamDatePickerProps)["tabindex"] | — |
cellClassName | 设置自定义类名 | Function | undefined | — |
type | 选择器类型；自 2.14.5 起支持 quarter、quarters 和 quarterrange。 | enum"date" | "year" | "years" | "month" | "months" | "dates" | "week" | "quarter" | "quarters" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange" | "quarterrange"完整类型：(AsamDatePickerProps)["type"] | — |
name | 原生属性 | (AsamDatePickerProps)["name"] | — |
format | 显示在输入框中的格式 | string | undefined | — |
defaultValue | 可选，选择器打开时默认显示的时间 | (AsamDatePickerProps)["defaultValue"] | — |
editable | 文本框可输入 | (AsamDatePickerProps)["editable"] | false |
emptyValues | 组件空值配置，参阅配置提供器的空值说明。 | unknown[] | undefined | — |
valueOnClear | 清空后的返回值，参阅配置提供器的空值说明。 | (AsamDatePickerProps)["valueOnClear"] | — |
validateEvent | 是否触发表单验证 | (AsamDatePickerProps)["validateEvent"] | false |
disabledDate | 一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。应该返回一个 Boolean 值。 | Function | undefined | — |
shortcuts | 设置快捷选项，需要传入数组对象 | unknown[] | undefined | — |
arrowControl | — | boolean | undefined | false |
unlinkPanels | 在范围选择器里取消两个日期面板之间的联动 | boolean | undefined | false |
showNow | — | (AsamDatePickerProps)["showNow"] | false |
showConfirm | 是否显示确定按钮 | (AsamDatePickerProps)["showConfirm"] | false |
showFooter | dates、months、years 或 quarters 模式下是否显示底部。 | (AsamDatePickerProps)["showFooter"] | false |
showWeekNumber | 显示周数(除周外) | boolean | undefined | false |
clearable | 是否显示清除按钮 | (AsamDatePickerProps)["clearable"] | false |
disabledHours | — | (AsamDatePickerProps)["disabledHours"] | — |
disabledMinutes | — | (AsamDatePickerProps)["disabledMinutes"] | — |
disabledSeconds | — | (AsamDatePickerProps)["disabledSeconds"] | — |
valueFormat | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | undefined | — |
dateFormat | — | string | undefined | — |
timeFormat | — | string | undefined | — |
defaultTime | 范围选择时选中日期所使用的当日内具体时刻 | (AsamDatePickerProps)["defaultTime"] | — |
isRange | — | boolean | undefined | false |
singlePanel | 在范围选择器中只显示一个面板 | boolean | undefined | false |
automaticDropdown | 该属性决定在输入框获得焦点时日期选择面板是否弹出。（在 3.0 版本中，默认值将设置为 false） | (AsamDatePickerProps)["automaticDropdown"] | false |
clearIcon | 自定义清除图标 | (AsamDatePickerProps)["clearIcon"] | — |
saveOnBlur | — | (AsamDatePickerProps)["saveOnBlur"] | false |
prefixIcon | 自定义前缀图标如果 type的值是TimeLikeType，那么就是 Clock，不然就是 Calendar | (AsamDatePickerProps)["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 | 绑定值，如果是 range 选择器，数组长度应为 2 | AsamDateValue | false |
teleported | 将浮层挂载到 document.body，透传给原生选择器的提示浮层。 | boolean | undefined | false |
事件 AsamDatePickerEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
update:modelValue | — | [value: AsamDateValue] | — |
change | — | [value: AsamDateValue] | — |
focus | — | [event: FocusEvent] | — |
blur | — | [event: FocusEvent] | — |
keydown | — | [event: KeyboardEvent] | — |
clear | — | (AsamDatePickerEmits)["clear"] | — |
calendar-change | — | [value: [Date, Date | null]] | — |
panel-change | — | [value: Date | [Date, Date], mode: "year" | "month", view?: string | undefined] | — |
visible-change | — | [visible: boolean] | — |
插槽 AsamDatePickerSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | (AsamDatePickerSlots)["default"] | — |
sidebar | 原生面板侧栏；指定类名应用到侧栏根节点。 | ((scope: { class: string; }) => unknown) | undefined | — |
range-separator | — | (() => unknown) | undefined | — |
prev-month | — | (() => unknown) | undefined | — |
next-month | — | (() => unknown) | undefined | — |
prev-year | — | (() => unknown) | undefined | — |
next-year | — | (() => unknown) | undefined | — |
实例方法与状态 AsamDatePickerExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
focus | — | () => void | — |
handleClose | — | () => void | — |
blur | — | () => void | — |
handleOpen | — | () => void | — |
用法与契约补充说明
ASAM 扩展与迁移
2.14.7 新增 quarter、quarters、quarterrange，季度展示可用 YYYY [年第] Q [季度]，模型可用 YYYY-[Q]Q。singlePanel 仅在原生 daterange、monthrange、yearrange、quarterrange、datetimerange 生效；单点 datetime 已是一份日期时间面板，不增加另一个范围入口。季度禁用根据实际日期判断，跨年选择应同时检查两端限制。动态替换 disabledDate 后会重新判断当前面板。showFooter、showConfirm 决定多选的提交流程。
ASAM 扩展与迁移
ASAM 四档 size 与表单、ConfigProvider 继承一致。空模型支持 null，展示 format 不改变存储；日期字符大小写按 valueFormat 规则配置。 validateEvent 控制表单校验触发；teleported 决定弹层挂载位置。 单点日期时间使用 DatePicker type=datetime；两个独立日期时间端点使用 DateTimeRangePicker。
本地化与高级配置
日期语言和控件文字是两份配置：本例的 locale.ts / locale.js 同时注册 Day.js 的 zh-cn 日期 locale，中文每周从周一开始，英文从周日开始。应用需显式安装 dayjs，并保证组件与应用消费同一实例；只切换 Provider 字典不会改变周首日。日期 locale 注册不切换应用的全局默认语言。
公开面板侧栏
sidebar 收到原生 class: string，把它绑定到侧栏根节点可保留布局。单点日期、日期时间、周/月/年/季度及对应多选和五类范围面板使用该侧栏。范围 singlePanel 仍按原有适用 type 生效。 示例保留单元格、导航、范围分隔符插槽；输入弹层可以切换 teleported，本体 Panel 就地渲染。
原生清空配置与迁移
固定 2.14.7 对某些清空哨兵与格式组合可能产生空显示、格式化异常或诊断；这些属于原生兼容限制，基础包装不接管处理。需要 nullable 业务模型的调用方应在自己的高级数据适配层处理；双端 DateTimeRangePicker/DateTimePicker 保留明确的完整范围/null 组合协议。原依赖默认字符串模型的用法需显式传入 valueFormat（日期 YYYY-MM-DD，时间 HH:mm:ss）。
原生默认值与适配说明
type 为 date，format 按 type 决定，valueFormat 未设置时为 Date；modelValue 默认空字符串。 其余行为默认值交由固定版本原生组件解析；显式 undefined、null、false 原样输入，不以包装层默认值覆盖。size 仅负责 ASAM large/big/default/small 四档密度及品牌样式。DatePicker/TimePicker/TimeSelect 的 focus/blur（日期和时间另有 handleOpen/handleClose）直接使用原生公开实例的接收者和返回值；Panel 没有这些输入实例方法。
关联组件
参数与事件补充说明
参数与事件说明
ariaLabel
必填：否；声明来源：上游声明。
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 源码 / 安装包为准）
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 源码 / 安装包为准）
popperOptions
必填：否；声明来源：上游声明。
popperOptions 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
popperOptions.placement:PublicMember<NonNullable<(AsamDatePickerProps)["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<(AsamDatePickerProps)["popperOptions"]>, "modifiers">— 依赖声明popperOptions.strategy:PublicMember<NonNullable<(AsamDatePickerProps)["popperOptions"]>, "strategy">— 依赖声明枚举：
"fixed"/"absolute"popperOptions.onFirstUpdate:PublicMember<NonNullable<(AsamDatePickerProps)["popperOptions"]>, "onFirstUpdate">— 依赖声明事件参数：
(arg0: Parameters<Extract<NonNullable<PublicMember<NonNullable<(AsamDatePickerProps)["popperOptions"]>, "onFirstUpdate">>, (...args: never[]) => unknown>>[0]): void
默认值与来源
未知 / 未声明固定上游文档默认：{}（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
disabled
必填：否；声明来源：上游声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
tabindex
必填：否；声明来源：上游声明。
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 源码 / 安装包为准）
type
必填：否；声明来源：上游声明。
type 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："date" / "year" / "years" / "month" / "months" / "dates" / "week" / "quarter" / "quarters" / "datetime" / "datetimerange" / "daterange" / "monthrange" / "yearrange" / "quarterrange"
默认值与来源
未知 / 未声明固定上游文档默认：date（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'date'（2.14.7；源码事实，未作为 ASAM 运行实测）
name
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
format
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：YYYY-MM-DD（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
defaultValue
必填：否；声明来源：上游声明。
defaultValue 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
editable
必填：否；声明来源：上游声明。
editable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：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嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
shortcuts
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：[]（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
arrowControl
必填：否；声明来源：上游声明。
arrowControl 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）unlinkPanels
必填：否；声明来源：上游声明。
unlinkPanels 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
showNow
必填：否；声明来源：上游声明。
showNow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）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 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
clearable
必填：否；声明来源：上游声明。
clearable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
disabledHours
必填：否；声明来源：上游声明。
disabledHours 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(role: string, comparingDate?: Parameters<Extract<NonNullable<(AsamDatePickerProps)["disabledHours"]>, (...args: never[]) => unknown>>[1]): number[]
disabledMinutes
必填：否；声明来源：上游声明。
disabledMinutes 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(hour: number, role: string, comparingDate?: Parameters<Extract<NonNullable<(AsamDatePickerProps)["disabledMinutes"]>, (...args: never[]) => unknown>>[2]): number[]
disabledSeconds
必填：否；声明来源：上游声明。
disabledSeconds 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(hour: number, minute: number, role: string, comparingDate?: Parameters<Extract<NonNullable<(AsamDatePickerProps)["disabledSeconds"]>, (...args: never[]) => unknown>>[3]): number[]
valueFormat
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
dateFormat
必填：否；声明来源：上游声明。
timeFormat
必填：否；声明来源：上游声明。
defaultTime
必填：否；声明来源：上游声明。
defaultTime 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
isRange
必填：否；声明来源：上游声明。
isRange 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）singlePanel
必填：否；声明来源：上游声明。
singlePanel 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
automaticDropdown
必填：否；声明来源：上游声明。
automaticDropdown 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
clearIcon
必填：否；声明来源：上游声明。
clearIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamDatePickerProps)["clearIcon"]>, (...args: never[]) => unknown>>[1]): any
clearIcon.__isFragment:undefined— 依赖声明clearIcon.__isTeleport:undefined— 依赖声明clearIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认：`CircleClose`（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
saveOnBlur
必填：否；声明来源：上游声明。
saveOnBlur 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）prefixIcon
必填：否；声明来源：上游声明。
prefixIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamDatePickerProps)["prefixIcon"]>, (...args: never[]) => unknown>>[1]): any
prefixIcon.__isFragment:undefined— 依赖声明prefixIcon.__isTeleport:undefined— 依赖声明prefixIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
readonly
必填：否；声明来源：上游声明。
readonly 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
placeholder
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
rangeSeparator
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：'-'（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
startPlaceholder
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（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 默认；已安装组件）AsamDatePickerProps 公开类型视图
ts
import type { Attrs } from 'vue';
import type { AsamDatePickerProps, AsamDatePickerPanelProps, AsamControlSize, AsamDateValue } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamDatePickerProps
type PublicContract = {
readonly "ariaLabel"?: string | undefined;
readonly "id"?: (AsamDatePickerProps)["id"];
readonly "popperClass"?: AsamDatePickerProps["popperClass"];
readonly "popperStyle"?: (AsamDatePickerProps)["popperStyle"];
readonly "fallbackPlacements"?: (AsamDatePickerProps)["fallbackPlacements"];
readonly "placement"?: (AsamDatePickerProps)["placement"];
readonly "popperOptions"?: (AsamDatePickerProps)["popperOptions"];
readonly "disabled"?: (AsamDatePickerProps)["disabled"];
readonly "tabindex"?: (AsamDatePickerProps)["tabindex"];
readonly "cellClassName"?: Function | undefined;
readonly "type"?: (AsamDatePickerProps)["type"];
readonly "name"?: (AsamDatePickerProps)["name"];
readonly "format"?: string | undefined;
readonly "defaultValue"?: (AsamDatePickerProps)["defaultValue"];
readonly "editable"?: (AsamDatePickerProps)["editable"];
readonly "emptyValues"?: unknown[] | undefined;
readonly "valueOnClear"?: (AsamDatePickerProps)["valueOnClear"];
readonly "validateEvent"?: (AsamDatePickerProps)["validateEvent"];
readonly "disabledDate"?: Function | undefined;
readonly "shortcuts"?: unknown[] | undefined;
readonly "arrowControl"?: boolean | undefined;
readonly "unlinkPanels"?: boolean | undefined;
readonly "showNow"?: (AsamDatePickerProps)["showNow"];
readonly "showConfirm"?: (AsamDatePickerProps)["showConfirm"];
readonly "showFooter"?: (AsamDatePickerProps)["showFooter"];
readonly "showWeekNumber"?: boolean | undefined;
readonly "clearable"?: (AsamDatePickerProps)["clearable"];
readonly "disabledHours"?: (AsamDatePickerProps)["disabledHours"];
readonly "disabledMinutes"?: (AsamDatePickerProps)["disabledMinutes"];
readonly "disabledSeconds"?: (AsamDatePickerProps)["disabledSeconds"];
readonly "valueFormat"?: string | undefined;
readonly "dateFormat"?: string | undefined;
readonly "timeFormat"?: string | undefined;
readonly "defaultTime"?: (AsamDatePickerProps)["defaultTime"];
readonly "isRange"?: boolean | undefined;
readonly "singlePanel"?: boolean | undefined;
readonly "automaticDropdown"?: (AsamDatePickerProps)["automaticDropdown"];
readonly "clearIcon"?: (AsamDatePickerProps)["clearIcon"];
readonly "saveOnBlur"?: (AsamDatePickerProps)["saveOnBlur"];
readonly "prefixIcon"?: (AsamDatePickerProps)["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"?: AsamDateValue;
"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 声明。
AsamDatePickerEmits 公开类型视图
ts
import type { AsamDatePickerEmits, AsamDateValue, AsamDatePickerPanelEmits } from '@asam-ui/ui';
// AsamDatePickerEmits
type PublicContract = {
"update:modelValue": [value: AsamDateValue];
"change": [value: AsamDateValue];
"focus": [event: FocusEvent];
"blur": [event: FocusEvent];
"keydown": [event: KeyboardEvent];
"clear": (AsamDatePickerEmits)["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<(AsamDatePickerSlots)["default"]>, (...args: never[]) => unknown>>[0]): unknown
sidebar
必填：否；声明来源：ASAM 声明。
sidebar 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: { class: string; }): unknown
range-separator
必填：否；声明来源：ASAM 声明。
range-separator 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
prev-month
必填：否；声明来源：ASAM 声明。
prev-month 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
next-month
必填：否；声明来源：ASAM 声明。
next-month 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
prev-year
必填：否；声明来源：ASAM 声明。
prev-year 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
next-year
必填：否；声明来源：ASAM 声明。
next-year 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
AsamDatePickerSlots 公开类型视图
ts
import type { AsamDatePickerSlots } from '@asam-ui/ui';
// AsamDatePickerSlots
type PublicContract = {
"default"?: (AsamDatePickerSlots)["default"];
"sidebar"?: ((scope: { class: string; }) => unknown) | undefined;
"range-separator"?: (() => unknown) | undefined;
"prev-month"?: (() => unknown) | undefined;
"next-month"?: (() => unknown) | undefined;
"prev-year"?: (() => unknown) | undefined;
"next-year"?: (() => unknown) | undefined;
};参数与事件说明
focus
必填：是；声明来源：上游声明。
focus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
handleClose
必填：是；声明来源：上游声明。
handleClose 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
blur
必填：是；声明来源：上游声明。
blur 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
handleOpen
必填：是；声明来源：上游声明。
handleOpen 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
AsamDatePickerExpose 公开类型视图
ts
import type { AsamDatePickerExpose } from '@asam-ui/ui';
// AsamDatePickerExpose
type PublicContract = {
"focus": () => void;
"handleClose": () => void;
"blur": () => void;
"handleOpen": () => void;
};