time-range

时间范围组件，默认情况下使用dict-time-range使用，如果字典包配置中有配置componentsPreFix字段，请根据此字段的具体配置值进行前缀修改，如配置了componentsPreFix为Bu, 则使用bu-time-range使用。

复制成功

00:00

注意

startTimeFormat 配置有要求，与startTimePickerColumnsType 配置息息相关，startTimePickerColumnsType存在hour 则startTimeFormat必须存在 hh, 存在minute则必须存在mm, 存在second则必须存在ss。

endTimeFormat 配置有要求，与endTimePickerColumnsType 配置息息相关，endTimePickerColumnsType存在hour 则endTimeFormat必须存在 hh, 存在minute则必须存在mm, 存在second则必须存在ss。

为了免去配置startTimeFormat和endTimeFormat，也可将dateFormat和timeFormat配置合并为一个format，格式为${startTimeFormat}${formatSpacer}${endTimeFormat}， startTimeFormat和endTimeFormat必须遵循上述规则，且使用formatSpacer(默认值为英文逗号，)连接，也可以是数组形式[startTimeFormat, endTimeFormat]

valueFormat 配置则必须是符合规则的时间格式字符串，可以是timestamp

上述 配置 startTimePickerColumnsType 和 endTimePickerColumnsType 将时分秒 顺序弄返是有意为之，旨在说明配置format时，显示值将根据format配置进行展示；不配置format时，显示值将根据 startTimePickerColumnsType 和 endTimePickerColumnsType 配置顺序 进行展示，数组形式展示时间时间。

组件结构

组件封装结构如下

 <div class="van-time-range-picker-dict van-cell-dict">
    <van-field ref="VanFieldRef"></van-field>
    <van-popup ref="VanPopupRef">
      <van-picker-group ref="VanPickerGroupRef">
        <van-time-picker ref="VanStartTimePickerRef"></van-time-picker>
        <van-time-picker ref="VanEndTimePickerRef"></van-time-picker>
      </van-picker-group>
    </van-popup>
 </div>

const VanFieldRef = ref(null)
const getVanFieldRef = () => {
  return VanFieldRef.value
}
const VanPopupRef = ref(null)
const getVanPopupRef = () => {
  return VanPopupRef.value
}
const VanStartTimePickerRef = ref(null)
const getVanStartTimePickerRef = () => {
  return VanStartTimePickerRef.value
}

const VanEndTimePickerRef = ref(null)
const getVanEndTimePickerRef = () => {
  return VanEndTimePickerRef.value
}

const VanPickerGroupRef = ref(null)
const getVanPickerGroupRef = () => {
  return VanPickerGroupRef.value
}
defineExpose({ getVanFieldRef, getVanPopupRef, getVanStartTimePickerRef, getVanEndTimePickerRef, getVanPickerGroupRef })

属性、事件和插槽继承技巧

此组件引用了van-field、van-popup、van-time-picker、van-picker-group四个组件，其中van-field组件可直接继承原生属性、事件和插槽， van-popup继承属性、事件和插槽时添加 popup- 前缀即可，开始时间的 van-time-picker组件则是添加 start-time-picker- 前缀，结束时间的 van-time-picker组件则是添加 end-time-picker- 前缀，van-picker-group组件则是添加 picker-group- 前缀

点击阅读field组件使用文档

点击阅读popup组件使用文档

点击阅读picker-group组件使用文档

点击阅读time-picker组件使用文档

属性

属性	类型	说明	默认值
clearable	Boolean	是否可清除	false
showArrow	Boolean	展示清除按钮时是否展示右边箭头	true
spacer	string	间隔符	-
showForever	Boolean	是否显示永久选项	false
foreverLabel	String	永久选项对应中文名	永久
foreverValue	String	永久选项对应值	forever
startTimePickerColumnsType	string[]	选项类型，由 year、month 和 day 组成的数组	['year', 'month', 'day']
startTimeFormat	String	自定义显示格式 与startTimePickerColumnsType配置息息相关	无
endTimePickerColumnsType	string[]	选项类型，由 year、month 和 day 组成的数组	['year', 'month', 'day']
endTimeFormat	String	自定义显示格式 与endTimePickerColumnsType配置息息相关	无
formatSpacer	String	startTimeFormat和endTimeFormat合并为format配置的的间隔符	,
format	String, Array	自定义显示格式 startTimeFormat和endTimeFormat合并的配置 formatSpacer连接	无
sameInput	Boolean	绑定值的数据是否跟随显示值一致	true
valueFormat	String	自定义显示格式 sameInput为false时生效，需为正常时间格式，默认为标准时间格式，timestamp 为时间戳	无
defaultValv1.1.0	string	有modelValue没值时的缺省代替显示值，默认为null	null
openDefaultValJudgev1.1.0	boolean	是否当项目不可选时才显示defaultVal	true

事件

事件名称	说明
dictChange	选中值时触发此事件，并返回选中的值

提示

picker-group弹出框 顶部栏标题可 直接配置 title属性， picker-group-title 和 pickerGroupTitle 属性 也是有效

picker-group弹出框 顶部栏取消按钮文字可 直接配置 cancel-button-text 或 cancelButtonText属性， picker-group-cancel-button-text 和 pickerGroupCancelButtonText 属性 也是有效

picker-group弹出框 顶部栏确认按钮文字可 直接配置 confirm-button-text 或 confirmButtonText属性, picker-group-confirm-button-text 和 pickerGroupConfirmButtonText 属性 也是有效

picker-group弹出框 顶部栏下一步文字可 直接配置 next-step-text 或 nextStepText属性, picker-group-next-step-text 和 pickerGroupNextStepText 属性 也是有效