time

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

复制成功

00:00

注意

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

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

上述 配置 timePickerColumnsType 将年月日 顺序弄返是有意为之，旨在说明配置format时，显示值将根据format配置进行展示；不配置format时，显示值将根据 timePickerColumnsType 配置顺序 进行展示。

组件结构

组件封装结构如下

 <div class="van-time-picker-dict van-cell-dict">
    <van-field ref="VanFieldRef"></van-field>
    <van-popup ref="VanPopupRef">
      <van-time-picker ref="VanDatePickerRef"></van-time-picker>
    </van-popup>
 </div>

const VanFieldRef = ref(null)
const getVanFieldRef = () => {
  return VanFieldRef.value
}
const VanPopupRef = ref(null)
const getVanPopupRef = () => {
  return VanPopupRef.value
}
const VanTimePickerRef = ref(null)
const getVanTimePickerRef = () => {
  return VanTimePickerRef.value
}
defineExpose({ getVanFieldRef, getVanPopupRef, getVanTimePickerRef })

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

此组件引用了van-field、van-popup、van-time-picker三个组件，其中van-field组件可直接继承原生属性、事件和插槽， van-popup继承属性、事件和插槽时添加 popup- 前缀即可，同理 van-time-picker组件则是添加 time-picker- 前缀

点击阅读field组件使用文档

点击阅读popup组件使用文档

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

属性

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

事件

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

提示

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

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

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