vue3+ts+vant4如何写一个有联动的日期选择器组，包含开始日期和结束日期,并在头部分别显示开始日期和结束日期 ，点击开始日期框选择开始日期，点击结束日期框选择结束日期

首先，需要安装并引入 `vant4` 组件库，以及 `vue3` 和 `typescript`。

然后，可以定义一个 `DateRangePicker` 组件，其中包含一个 `DatePicker` 组件和一个显示日期的输入框。在 `DatePicker` 组件上绑定 `v-model`，将选择的日期传递给父组件。在父组件中定义两个日期变量 `startDate` 和 `endDate`，并将它们分别传递给 `DateRangePicker` 组件。当选择开始日期时，更新 `startDate` 的值；当选择结束日期时，更新 `endDate` 的值。

最后，在 `DateRangePicker` 组件的头部显示开始日期和结束日期。

代码示例：

<template>
  <div>
    <div>
      <van-field v-model="startDate" label="开始日期" readonly @click="showStartDatePicker" />
    </div>
    <div>
      <van-field v-model="endDate" label="结束日期" readonly @click="showEndDatePicker" />
    </div>
    <van-popup v-model="showDatePicker">
      <van-date-picker v-model="selectedDate" @confirm="confirmDate" />
    </van-popup>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Popup, Field, DatePicker } from 'vant';

export default defineComponent({
  components: {
    Popup,
    Field,
    DatePicker,
  },
  props: {
    startDate: {
      type: String,
      default: '',
    },
    endDate: {
      type: String,
      default: '',
    },
  },
  setup(props) {
    const showDatePicker = ref(false);
    const selectedDate = ref(new Date());

    const showStartDatePicker = () => {
      showDatePicker.value = true;
      selectedDate.value = new Date(props.startDate);
    };

    const showEndDatePicker = () => {
      showDatePicker.value = true;
      selectedDate.value = new Date(props.endDate);
    };

    const confirmDate = () => {
      showDatePicker.value = false;
      if (props.startDate === '') {
        // 选择开始日期
        props.onChangeStartDate(selectedDate.value.toLocaleDateString());
      } else {
        // 选择结束日期
        props.onChangeEndDate(selectedDate.value.toLocaleDateString());
      }
    };

    return {
      showDatePicker,
      selectedDate,
      showStartDatePicker,
      showEndDatePicker,
      confirmDate,
    };
  },
});
</script>

在父组件中使用 `DateRangePicker` 组件，并传递开始日期和结束日期的值以及更新方法。

<template>
  <div>
    <date-range-picker
      :start-date="startDate"
      :end-date="endDate"
      @change-start-date="startDate = $event"
      @change-end-date="endDate = $event"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import DateRangePicker from './DateRangePicker.vue';

export default defineComponent({
  components: {
    DateRangePicker,
  },
  setup() {
    const startDate = ref('');
    const endDate = ref('');

    const onChangeStartDate = (value: string) => {
      startDate.value = value;
    };

    const onChangeEndDate = (value: string) => {
      endDate.value = value;
    };

    return {
      startDate,
      endDate,
      onChangeStartDate,
      onChangeEndDate,
    };
  },
});
</script>

在父组件中，可以根据 `startDate` 和 `endDate` 的值来显示头部的日期。

<template>
  <div>
    <div>{{ startDate }}</div>
    <div>{{ endDate }}</div>
    <date-range-picker
      :start-date="startDate"
      :end-date="endDate"
      @change-start-date="startDate = $event"
      @change-end-date="endDate = $event"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import DateRangePicker from './DateRangePicker.vue';

export default defineComponent({
  components: {
    DateRangePicker,
  },
  setup() {
    const startDate = ref('');
    const endDate = ref('');

    const onChangeStartDate = (value: string) => {
      startDate.value = value;
    };

    const onChangeEndDate = (value: string) => {
      endDate.value = value;
    };

    return {
      startDate,
      endDate,
      onChangeStartDate,
      onChangeEndDate,
    };
  },
});
</script>