date-range

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

复制成功

00:00

注意

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

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

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

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

上述 配置 startDatePickerColumnsType 和 endDatePickerColumnsType 将年月日 顺序弄返是有意为之，旨在说明配置format时，显示值将根据format配置进行展示；不配置format时，显示值将根据 startDatePickerColumnsType 和 endDatePickerColumnsType 配置顺序 进行展示，数组形式展示两个日期。

组件结构

组件封装结构如下

 <div class="van-date-range-picker-dict van-cell-dict">
    <van-field ref="VanFieldRef"></van-field>
    <van-popup ref="VanPopupRef">
      <van-picker-group ref="VanPickerGroupRef">
        <van-date-picker ref="VanStartDatePickerRef"></van-date-picker>
        <van-date-picker ref="VanEndDatePickerRef"></van-date-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 VanStartDatePickerRef = ref(null)
const getVanStartDatePickerRef = () => {
  return VanStartDatePickerRef.value
}

const VanEndDatePickerRef = ref(null)
const getVanEndDatePickerRef = () => {
  return VanEndDatePickerRef.value
}

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

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

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

点击阅读field组件使用文档

点击阅读popup组件使用文档

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

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

属性

属性	类型	说明	默认值
clearable	Boolean	是否可清除	false
showArrow	Boolean	展示清除按钮时是否展示右边箭头	true
spacer	string	间隔符	-
showForever	Boolean	是否显示永久选项	false
foreverLabel	String	永久选项对应中文名	永久
foreverValue	String	永久选项对应值	forever
startDatePickerColumnsType	string[]	选项类型，由 year、month 和 day 组成的数组	['year', 'month', 'day']
startDateFormat	String	自定义显示格式 与startDatePickerColumnsType配置息息相关	无
endDatePickerColumnsType	string[]	选项类型，由 year、month 和 day 组成的数组	['year', 'month', 'day']
endDateFormat	String	自定义显示格式 与endDatePickerColumnsType配置息息相关	无
formatSpacer	String	startDateFormat和endDateFormat合并为format配置的的间隔符	,
format	String, Array	自定义显示格式 startDateFormat和endDateFormat合并的配置 formatSpacer连接	无
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	选中值时触发此事件，并返回选中的值

提示

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 属性 也是有效