DatetimePicker 日期时间选择器

用于同时选择日期和时间的组件。

引入

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

代码演示

基础用法

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

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

const datetime = ref('')

带标签

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

<zq-datetime-picker v-model="datetime" label="预约时间" placeholder="请选择" />

自定义年份范围

通过 min-year 和 max-year 属性限制可选年份范围。

<zq-datetime-picker
  v-model="datetime"
  label="出生日期"
  :min-year="1950"
  :max-year="2024"
  placeholder="请选择"
/>

自定义后缀文字

通过 year-suffix、month-suffix、day-suffix、hour-suffix、minute-suffix 属性自定义各列后缀文字。

<zq-datetime-picker
  v-model="datetime"
  year-suffix="年"
  month-suffix="月"
  day-suffix="日"
  hour-suffix="时"
  minute-suffix="分"
/>

自定义按钮文字

通过 confirm-text 和 cancel-text 属性自定义确认和取消按钮文字。

<zq-datetime-picker
  v-model="datetime"
  confirm-text="OK"
  cancel-text="Cancel"
/>

必填标记

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

<zq-datetime-picker v-model="datetime" label="开始时间" required placeholder="必填" />

禁用状态

通过 disabled 属性禁用选择器。

<zq-datetime-picker v-model="datetime" label="时间" disabled />

错误状态

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

<zq-datetime-picker
  v-model="datetime"
  label="时间"
  error
  error-message="请选择时间"
/>

无边框

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

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

API

Props

参数	说明	类型	默认值
v-model	选中的日期时间，格式 YYYY-MM-DD HH:mm	string	''
label	左侧标签文字	string	''
placeholder	占位提示文字	string	'请选择日期时间'
disabled	是否禁用	boolean	false
border	是否显示下边框	boolean	true
required	是否显示必填星号	boolean	false
error	是否标记为错误状态	boolean	false
error-message	错误提示文字	string	''
label-width	标签宽度	string	'180rpx'
title	弹窗标题	string	''
confirm-text	确认按钮文字	string	'确定'
cancel-text	取消按钮文字	string	'取消'
min-year	可选的最小年份	number	1900
max-year	可选的最大年份	number	2100
year-suffix	年份后缀文字	string	'年'
month-suffix	月份后缀文字	string	'月'
day-suffix	日期后缀文字	string	'日'
hour-suffix	小时后缀文字	string	'时'
minute-suffix	分钟后缀文字	string	'分'
format	显示格式	string	'YYYY-MM-DD HH:mm'

Events

事件名	说明	回调参数
update:modelValue	选中值变化时触发	value: string
change	选中值变化时触发	value: string
confirm	点击确认按钮时触发	value: string
cancel	点击取消按钮时触发	-

Slots

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

主题定制

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