vue3+vant4如何写一个有联动的日期选择器组，包含开始日期和结束日期

可以使用vant4中的DatePicker组件，结合vue3中的响应式数据，实现一个有联动的日期选择器组。具体实现步骤如下：

1. 在vue的setup中定义两个响应式的变量，分别代表开始日期和结束日期。

2. 在模板中使用DatePicker组件，分别绑定开始日期和结束日期的值。

3. 在开始日期的change事件中，更新结束日期的最小值为开始日期的值，确保结束日期不能早于开始日期。

4. 在结束日期的change事件中，更新开始日期的最大值为结束日期的值，确保开始日期不能晚于结束日期。

代码示例：

<template>
  <div>
    <van-cell title="开始日期">
      <van-date-picker
        v-model="startDate"
        type="date"
        @change="handleStartDateChange"
      />
    </van-cell>
    <van-cell title="结束日期">
      <van-date-picker
        v-model="endDate"
        type="date"
        :min-date="startDate"
        @change="handleEndDateChange"
      />
    </van-cell>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      startDate: null,
      endDate: null
    })

    const handleStartDateChange = (value) => {
      state.endDate = null // 重置结束日期

      // 更新结束日期的最小值
      const { minDate } = state.$refs.endDate
      state.$refs.endDate.updateMinDate(value || minDate)
    }

    const handleEndDateChange = (value) => {
      // 更新开始日期的最大值
      const { maxDate } = state.$refs.startDate
      state.$refs.startDate.updateMaxDate(value || maxDate)
    }

    return {
      ...state,
      handleStartDateChange,
      handleEndDateChange
    }
  }
}

其中，使用了refs来获取DatePicker组件的实例，从而调用updateMinDate和updateMaxDate方法来动态更新最小值和最大值。