Skip to content

介绍


本文档主要用于描述 ShadcnDatePicker 组件的一些特性和用法。

用法

查看代码
vue
<template>
    <ShadcnDatePicker v-model="value" />
</template>

类型 (type)

查看代码
vue
<template>
    <ShadcnDatePicker v-model="value" type="date" />
    <ShadcnDatePicker v-model="value" type="range" />
</template>

占位符 (placeholder)

查看代码
vue
<template>
    <ShadcnDatePicker v-model="value" placeholder="Enter string" />
</template>

禁用 (disabled)

查看代码
vue
<template>
    <ShadcnDatePicker v-model="value" disabled />
    <ShadcnDatePicker v-model="value" :disabled="false" />
</template>

只读 (readonly)

查看代码
vue
<template>
    <ShadcnDatePicker v-model="value" readonly />
    <ShadcnDatePicker v-model="value" :readonly="false" />
</template>

格式 (format)

查看代码
vue
<template>
    <ShadcnDatePicker v-model="value" format="YYYY-MM-DD" />
</template>

清空 (clearable)

查看代码
vue
<template>
    <ShadcnDatePicker v-model="value" clearable />
    <ShadcnDatePicker v-model="value" :clearable="false" />
</template>

显示快捷方式 (show-shortcuts)

查看代码
vue
<template>
    <ShadcnDatePicker v-model="value" showShortcuts />
    <ShadcnDatePicker v-model="value" :showShortcuts="false" />
</template>

日期选取器 (Date Picker) 属性

日期选取器 (Date Picker) 事件