H5 中时间预约筛选 利用Vant 组件中picker

              

今天要做一个上门洗衣预约时间的流程，就是用户在今天的日期可以进行选择某一刻时间段，但是如果说是现在上午10：30分 ，那么就不可以选10：30分之前的时间段和当前的时间段，都不可以进行选择，但是在当天看其他的日期，是可以选择任意时间段的，听着感觉简单，但是操作下来 还是听麻烦的，废话不多说，直接代码展示，大家可以赋值直接用的

<template>
<div class="verification-code-field">
            <van-field
              v-model="TimeValue"
              is-link
              readonly
              placeholder="请选择上门时间"
              @click="Timeshow = true"
            />
            <van-popup
              v-model="Timeshow"
              round
              position="bottom"
              :style="{ backgroundColor: 'white' }"
            >
              <div style="cascader">
                <van-picker
                  show-toolbar
                  title="请选择上门时间"
                  :columns="columns"
                  @confirm="onConfirmTime"
                />
              </div>
            </van-popup>
          </div>

</template>

 

<script>

export default{
    data(){
      return{
          columns: [
        // 第一列
        {
          values: [],
          defaultIndex: 0,
        },
        // 第二列
        {
          values: [],
          defaultIndex: 1,
        },
      ],
       TimeValue: "",

       }
   },
    created() {
    var today = new Date(); // 可以传入任意起始日期
    this.generateMonthDates(today);
    this.columns[0].values = this.generateMonthDates(new Date());
    this.columns[1].values = this.generateTimeSlots();
  },
   methods:{
   //获取日期
    generateMonthDates(startingDate) {
      var columnsValues = [];
      var daysOfWeek = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      function formatDate(date) {
        var month = (date.getMonth() + 1).toString().padStart(2, "0"); // 补0确保两位数
        var day = date.getDate().toString().padStart(2, "0"); // 补0确保两位数
        return month + "-" + day;
      }

      for (var i = 0; i < 30; i++) {
        var nextDate = new Date(startingDate);
        nextDate.setDate(startingDate.getDate() + i);
        var dayOfWeek = daysOfWeek[nextDate.getDay()];
        var formattedDate = formatDate(nextDate);
        columnsValues.push(dayOfWeek + " (" + formattedDate + ")");
      }

      return columnsValues;
    },
    //获取时间段日期
   generateTimeSlots() {
      var timeSlots = [];
      // 从 9:00 开始，每隔一个小时，生成时间段
      for (var i = 9; i <= 20; i++) {
        var startTime = i.toString().padStart(2, "0") + ":00";
        var endTime = (i + 1).toString().padStart(2, "0") + ":00";
        var timeSlot = startTime + "-" + endTime;
        timeSlots.push(timeSlot);
      }
      return timeSlots;
    },

    //点击确定按钮的点击事件
onConfirmTime(e) {
      // 获取用户选择的预约信息
      var appointment = e;
      // 获取当前时间
      var currentTime = new Date();
      console.log(currentTime, "currentTime...");
      // 获取用户选择的预约日期和时间
      var selectedDate = appointment[0];
      var selectedTimeSlot = appointment[1];

      // 对用户选择的日期进行处理，提取出具体的月份和日期
      var selectedDateParts = selectedDate.split(" ");
      var selectedMonthAndDay = selectedDateParts[1].replace(/\(|\)/g, "");
      var currentMonthAndDay =
        (currentTime.getMonth() + 1).toString().padStart(2, "0") +
        "-" +
        currentTime.getDate().toString().padStart(2, "0");
      // 如果选择的日期是今天
      if (selectedMonthAndDay === currentMonthAndDay) {
        // 获取当前小时数和分钟数
        var currentHour = currentTime.getHours();
        var currentMinutes = currentTime.getMinutes();
        // 解析用户选择的时间段
        var timeParts = selectedTimeSlot.split(":");
        var selectedHour = parseInt(timeParts[0], 10);
        var selectedMinutes = parseInt(timeParts[1], 10);

        // 如果当前时间已经超过了用户选择的时间段
        if (
          currentHour > selectedHour ||
          (currentHour === selectedHour && currentMinutes > selectedMinutes)
        ) {
          // 提示用户不能选择过去的时间段
          this.$toast("不能选择过去的时间段");
          // 返回或者执行其他操作
          return;
        }
      }

      // 获取今年的年份
      var currentYear = new Date().getFullYear();
      // 将选定的时间赋给 this.TimeValue
      this.TimeValue =
        currentYear + "-" + selectedMonthAndDay + " " + selectedTimeSlot;
      console.log(this.TimeValue, "this.TimeValue...");
      // 关闭弹窗
      this.Timeshow = false;
      // 在这里可以继续编写你的预约逻辑
    },
   }



}

</script>