介绍
本文档主要用于描述 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>液态玻璃效果 (glass)
查看代码
vue
<template>
<div :class="['p-6 rounded-lg', isDark ? 'bg-gradient-to-r from-blue-900 to-indigo-900' : 'bg-gradient-to-r from-blue-400 to-indigo-400']">
<ShadcnDatePicker v-model="dateValue" glass :dark="isDark" />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const isDark = ref(false)
const dateValue = ref('')
</script>