Date Picker Panel 日期选择器面板
用于在面板中选择日期(单选),包含月份切换与日期表格。
基础用法
2026 年 1 月
| 日 | 一 | 二 | 三 | 四 | 五 | 六 |
|---|---|---|---|---|---|---|
html
<template>
<dk-date-picker-panel v-model="value" />
</template>
<script setup>
import { ref } from 'vue'
const value = ref('2026-01-29')
</script>展开
一周起始日(first-day-of-week)
2026 年 1 月
| 一 | 二 | 三 | 四 | 五 | 六 | 日 |
|---|---|---|---|---|---|---|
html
<template>
<dk-date-picker-panel v-model="value" :first-day-of-week="1" />
</template>展开
禁用
2026 年 1 月
| 日 | 一 | 二 | 三 | 四 | 五 | 六 |
|---|---|---|---|---|---|---|
html
<template>
<dk-date-picker-panel v-model="value" disabled />
</template>展开
属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值(YYYY-MM-DD) | string | '' |
| disabled | 是否禁用 | boolean | false |
| width | 面板宽度 | string | '320px' |
| first-day-of-week | 一周起始日(0-6) | number | 0 |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:modelValue | v-model 更新 | (value: string) |
| change | 选择日期后触发 | (value: string) |