Date Picker Panel

A single-date picker panel with month navigation and a calendar table.

source code
documents editing

Basic

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>

展开

Disabled

2026 年 1 月

日	一	二	三	四	五	六

html

<template>
  <dk-date-picker-panel v-model="value" disabled />
</template>

展开

Props

Name	Description	Type	Default
model-value / v-model	binding value (YYYY-MM-DD)	string	''
disabled	disabled state	boolean	false
width	panel width	string	'320px'
first-day-of-week	first day of week (0-6)	number	0

Events

Name	Description	Params
update:modelValue	v-model update	(value: string)
change	emitted after pick	(value: string)

Date Picker Panel ​

Basic ​

First day of week ​

Disabled ​

Props ​

Events ​

Contributors ​

Date Picker Panel

Basic

First day of week

Disabled

Props

Events

Contributors