vue3写移动端日期范围选择器

Vue3 中创建移动端日期范围选择器通常可以使用现成的第三方库，比如 vant-weapp 或者 element-plus 等 UI 框架提供的组件，它们都包含日期选择器组件，并支持双向绑定和范围选择。

例如，使用 Vant 的 `van-date-picker` 组件：

<template>
  <van-cell v-model="dateRange" type="primary">
    <van-date-picker
      confirm-label="确定"
      cancel-label="取消"
      :start-placeholder="startPlaceholder"
      :end-placeholder="endPlaceholder"
      @confirm="handleConfirm"
      :range-separator="separator"
    ></van-date-picker>
  </van-cell>
</template>

<script>
import { defineComponent } from 'vue';
import { DatePicker } from 'vant';

export default defineComponent({
  components: {
    DatePicker,
  },
  data() {
    return {
      dateRange: ['', ''], // 存储开始和结束日期，默认为空字符串
      startPlaceholder: '选择开始日期',
      endPlaceholder: '选择结束日期',
      separator: '至',
      handleConfirm(range) {
        this.dateRange = [range.start, range.end];
      },
    };
  },
});
</script>

在这个例子中，`dateRange` 数据属性用于存储选择的日期范围，`van-date-picker` 根据数据的变化动态显示相应的日期。当用户点击确认按钮时，会触发 `handleConfirm` 函数，更新数据并处理后续业务逻辑。