date

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

复制成功

00:00

注意

format 配置有要求，与datePickerColumnsType 配置息息相关，datePickerColumnsType存在year 则format必须存在 yyyy, 存在month则必须存在MM, 存在day则必须存在dd。

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

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

组件结构

组件封装结构如下

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

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

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

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

点击阅读field组件使用文档

点击阅读popup组件使用文档

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

属性

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

事件

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

提示

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

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

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