时间区间选择器

vx-range-picker 组件用于选择时间区间，提供灵活的日期范围选择功能。

目录：

• Props
• Events
• 值类型
• 组件类型
• 日期格式化 format
• 配合 datePickerProps 控制
• 各种状态
• blur 事件示例

Props

公共props

该组件继承了 vx-field的props，所以是通用的，以下仅罗列 vx-range-picker 特有的Props

Name	Introduction	Type	Default Value
type	见组件类型	String	datepicker
format	见日期格式化	String	'YYYY-MM-DD'
clearable	显示可清除样式	Boolean	false

vx-range-picker props

Name	Introduction	Type	Default Value
placeholder	占位文本	string[]	['', '']
needConfirm	选中的值需要点击确认才生效	boolean	false
datePickerProps	vuetify 原生参数，用于控制时间选择组件	datePickerProps[]	[]
modelValue	绑定的值，见值类型	string[] number[] Date[]	['', '']

Events

Name	Payload	Introduction
click:confirm	{ value: Ref<number[]>, next: Promise }	配置了 needconfirm 可以结合 click:confirm 实现对值的校验
blur	string	某些情况如果期望失焦或者关闭了下拉后获取值时用这个事件，查看blur 事件示例

值类型

• 组件拥有很强的传入值适应性，可以传入各种类型的值并格式化字符串、时间戳、日期类型都可，最终都会被格式化成默认格式或者传入的format格式
• vx-range-picker 可以切换值选中模式，当 needConfirm 为 true 时，需要点击确认按钮值才生效

组件类型

• type: datepicker datetimepicker

日期格式化 format

• datepicker 默认格式是 YYYY-MM-DD
• datetimepicker 默认格式是 YYYY-MM-DD HH:mm:ss
• format 不仅影响展示也影响组件的可选项，以及绑定的 modelValue

配合 datePickerProps 控制

可以通过 datePickerProps 对两个日期选择器分别进行控制，例如设置可选日期范围。

各种状态

blur 事件示例

blur 事件在组件失焦或关闭下拉菜单时触发，可用于获取当前值或执行其他操作。