vant 起止时间选择器

Vant 是一个基于 Vue.js 的移动端组件库，其中包含了一个起止时间选择器组件。使用起止时间选择器可以方便地选择一个时间段，例如选择一个开始时间和结束时间。以下是一个使用 Vant 起止时间选择器的示例代码：

<template>
  <div>
    <van-datetime-picker
      v-model="startTime"
      type="datetime"
      :min-date="minDate"
      :max-date="maxDate"
      :format="dateFormat"
      :title="startTitle"
    />
    <van-datetime-picker
      v-model="endTime"
      type="datetime"
      :min-date="minDate"
      :max-date="maxDate"
      :format="dateFormat"
      :title="endTitle"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      startTime: '',
      endTime: '',
      minDate: new Date(2010, 0, 1),
      maxDate: new Date(2025, 10, 1),
      dateFormat: 'YYYY-MM-DD HH:mm',
      startTitle: '开始时间',
      endTitle: '结束时间'
    };
  }
}
</script>

在上面的代码中，我们使用了两个 `van-datetime-picker` 组件来选择起止时间。其中，`v-model` 指令绑定了起始时间和结束时间的值，`min-date` 和 `max-date` 属性用来限制可选的时间范围，`format` 属性定义了时间格式，`title` 属性定义了选择器的标题。通过这些配置，我们可以快速实现一个起止时间选择器。