vant 时间选择器–开始时间和结束时间实例

vant 时间选择器是一个基于Vue.js的组件库，其中包含了常用的时间选择器组件。下面就详细讲解vant 时间选择器的开始时间和结束时间实例的攻略。

一、引入组件

在使用 vant 时间选择器组件之前，需要先在项目中引入这个组件库。

<!-- 引入样式文件 -->
<link rel="stylesheet" href="//unpkg.com/vant/lib/vant-css/index.css">
<!-- 引入 Vue.js -->
<script src="//unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<!-- 引入 vant 组件库 -->
<script src="//unpkg.com/vant/lib/vant.min.js"></script>

二、使用组件

开始时间和结束时间实例需要使用vant时间选择器的date-picker组件，下面就是使用组件的代码示例。

<template>
  <div>
    <van-date-picker v-model="show1" title="选择开始日期" :min-date="minDate" :max-date="maxDate" @confirm="onConfirmStart"></van-date-picker>
    <van-date-picker v-model="show2" title="选择结束日期" :min-date="minDate" :max-date="maxDate" @confirm="onConfirmEnd"></van-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show1: false,  // 是否展示开始时间选择器
      show2: false,  // 是否展示结束时间选择器
      minDate: new Date(2010, 0, 1),  // 最小日期
      maxDate: new Date(2025, 11, 31)  // 最大日期
    };
  },
  methods: {
    onConfirmStart(val, item) {  // 开始时间确认回调函数
      console.log('开始时间：', val);
    },
    onConfirmEnd(val, item) {  // 结束时间确认回调函数
      console.log('结束时间：', val);
    }
  }
};
</script>

在这个示例中，我们使用了vant时间选择器的date-picker组件，并分别给开始时间和结束时间设置了不同的标题。同时，我们还通过min-date和max-date属性设置了最小和最大日期，以便用户在选择时间时可以限制范围。在onConfirmStart和onConfirmEnd回调函数中，我们打印出用户选择的开始时间和结束时间，以便进行其他的处理。

除了以上的示例之外，我们还可以用vant时间选择器组件的min-date和max-date属性，设置小时和分钟的最小和最大值，以便用户只能在特定的时间范围内进行选择。

<van-date-picker v-model="show" title="选择时间" type="time" :min-date="minDate" :max-date="maxDate" @confirm="onConfirm"></van-date-picker>

在这个示例中，我们使用了vant时间选择器的type属性设置了选择器的类型为time，通过min-date和max-date属性设置了最小和最大的小时和分钟值，以便用户在选择时间时可以限制范围。在onConfirm回调函数中，我们打印出用户选择的时间，以便进行其他的处理。

到这里，我们就拿到了vant 时间选择器--开始时间和结束时间实例的完整攻略，可以根据具体需求进行灵活运用了。