PickerDateTime 日期时间选择器

基本用法

template

<vz-picker-date-time
  v-model="dateTimeValue"
  placeholder="请选择"
  fields="minute"
  border
  radius="20rpx"
></vz-picker-date-time>

script

import { ref } from "vue";

const dateTimeValue = ref("");

日期选择器

template

<vz-picker-date-time v-model="dateValue" placeholder="请选择" mode="date" border radius="20rpx"></vz-picker-date-time>

script

import { ref } from "vue";

const dateValue = ref("");

时间选择器

template

<vz-picker-date-time v-model="timeValue" placeholder="请选择" mode="time" border radius="20rpx"></vz-picker-date-time>

script

import { ref } from "vue";

const timeValue = ref("");

禁用状态

template

<vz-picker-date-time v-model="dateTimeValue" placeholder="请选择" disabled border radius="20rpx"></vz-picker-date-time>

script

import { ref } from "vue";

const dateTimeValue = ref("");

只读状态

template

<vz-picker-date-time v-model="dateTimeValue" placeholder="请选择" readonly border radius="20rpx"></vz-picker-date-time>

script

import { ref } from "vue";

const dateTimeValue = ref("");

可清除

template

<vz-picker-date-time v-model="dateTimeValue" placeholder="请选择" clearable border radius="20rpx"></vz-picker-date-time>

script

import { ref } from "vue";

const dateTimeValue = ref("");

前后图标

template

<vz-picker-date-time
  v-model="dateTimeValue"
  placeholder="请选择"
  prefix-icon="vz-icon-date"
  suffix-icon="vz-icon-arrow-bottom"
  border
  radius="20rpx"
></vz-picker-date-time>

script

import { ref } from "vue";

const dateTimeValue = ref("");

格式化

template

<vz-picker-date-time
  v-model="dateTimeValueFormat"
  placeholder="请选择"
  border
  radius="20rpx"
  format="YYYY年MM月DD日 HH时mm分ss秒"
></vz-picker-date-time>

script

import { ref } from "vue";

const dateTimeValueFormat = ref("");

Props

属性名	说明	类型	默认值
v-model / model-value	绑定的值	string / number	-
placeholder	未选择时占位符	string	-
disabled	是否禁用	boolean	false
readonly	是否只读	boolean	false
clearable	是否可清空	boolean	false
border	是否显示输入框边框	boolean	false
prefix-icon	前置图标	string	-
suffix-icon	后置图标	string	-
confirm-text	确定按钮文案	string	ConfirmView.confirmText
cancel-text	取消按钮文案	string	ConfirmView.cancelText
z-index	z-index	number \ string	Popup.zIndex
radius	弹窗圆角	string \ number	0
overlay-closeable	点击遮罩层是否关闭弹窗	boolean	true
safe-area-inset-bottom	是否开启底部安全区适配	boolean	Popup.safeAreaInsetBottom
mode	选择器类型	datetime / date / time	datetime
fields	选择器类型	year / month / day / hour / minute / second	second
start	选择范围的开始日期	string	-
end	选择范围的开始日期	string	-
format	自定义日期格式	string	YYYY-MM-DD HH:mm:ss
unit	选择项是否带单位	boolean	true
validate	是否触发表单校验	boolean	true
i-class	根节点样式类	string	-
i-style	根节点样式	Vue.CSSProperties	-

Events

事件名	说明	参数
confirm	点击确定按钮触发	{ value: string }
cancel	点击取消按钮触发	-
clear	点击清空图标触发	-

Slots

插槽名	说明
default	默认插槽