Date Picker

A single-date picker. It opens a date panel from an input and writes back YYYY-MM-DD after selection.

Basic

html

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

<script setup>
import { ref } from 'vue'

const value = ref('2026-01-29')
</script>

展开

html

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

展开

html

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

展开

Name	Description	Type	Default
model-value / v-model	binding value (YYYY-MM-DD)	string	''
disabled	disabled	boolean	false
clearable	clearable	boolean	true
placeholder	placeholder	string	'请选择日期'
width	input width	string	'240px'
panel-width	panel width	string	'320px'
first-day-of-week	first day of week (0-6)	number	0
disabled-date	disable date (return true means disabled)	(date: Date) => boolean	-
shortcuts	shortcuts	{ text: string; value: string \| Date \| (() => string \| Date) }[]	[]