DatePicker 日期选择器

用于选择日期的组件。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

通过 v-model 绑定选中的日期，格式为 YYYY-MM-DD。

<zq-date-picker v-model="date" placeholder="请选择日期" />

const date = ref('')

带标签

通过 label 属性设置左侧标签文字。

<zq-date-picker v-model="date" label="生日" placeholder="请选择生日" />

限制日期范围

通过 start 和 end 属性限制可选日期范围。

<zq-date-picker
  v-model="date"
  label="预约日期"
  start="2024-01-01"
  end="2025-12-31"
  placeholder="请选择日期"
/>

必填标记

通过 required 属性在标签前显示必填星号。

<zq-date-picker v-model="date" label="入职日期" required placeholder="必填" />

禁用状态

通过 disabled 属性禁用选择器。

<zq-date-picker v-model="date" label="日期" disabled />

错误状态

通过 error 属性标记错误状态，通过 error-message 显示错误提示。

<zq-date-picker
  v-model="date"
  label="日期"
  error
  error-message="请选择日期"
/>

无边框

通过 border 属性控制是否显示下边框。

<zq-date-picker v-model="date" :border="false" />

API

Props

参数	说明	类型	默认值
v-model	选中的日期，格式 YYYY-MM-DD	string	''
label	左侧标签文字	string	''
placeholder	占位提示文字	string	'请选择日期'
disabled	是否禁用	boolean	false
border	是否显示下边框	boolean	true
required	是否显示必填星号	boolean	false
error	是否标记为错误状态	boolean	false
error-message	错误提示文字	string	''
label-width	标签宽度	string	'180rpx'
start	可选的最小日期，格式 YYYY-MM-DD	string	''
end	可选的最大日期，格式 YYYY-MM-DD	string	''
format	显示格式	string	'YYYY-MM-DD'

Events

事件名	说明	回调参数
update:modelValue	选中日期变化时触发	value: string
change	选中日期变化时触发	value: string

Slots

名称	说明
label	自定义左侧标签

主题定制

变量名	说明
--color-bg-card	背景色
--color-divider	下边框颜色
--color-text-primary	选中值文字颜色
--color-text-placeholder	占位文字和图标颜色
--color-error	错误状态颜色