获取时隔半个钟的三天与el-time-select-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45788691/article/details/142758836

在这里插入图片描述
摘要：

今天遇到需求是配送时间，时隔半个钟的排线！所以需要拼接时间！例如2024-10-08 14：30，2024-10-08 15：00，2024-10-08 15：30

<el-form-item label="配送时间：" prop="spOrderTime">
    <el-select v-model="form.spOrderTime" clearable style="width: 240px" @change="changeOrderTime">
    <!-- <el-option v-for="item in Config.selectTimeOption" :key="item.value" :label="item.label"
          :value="item.value"></el-option> -->
             <el-option v-for="item in Config.selectTimeOption" :key="item.index" :label="item.value"
                 :value="item.value">
             </el-option>
     </el-select>
</el-form-item>

// 获取配送时间数组
    deliveryTimeList() {
      const now = dayjs();// 获取当前时间
      const threeDaysLater = now.add(2, 'day').endOf('day'); //3天后的日期
      const timePoints = [];//每个半小时整点的时间点
      let currentTime = now.startOf('hour');
      // 如果当前时间不是00分或30分，则跳到下一个半小时整点
      if (currentTime.minute() !== 0 && currentTime.minute() !== 30) {
        if (currentTime.minute() < 30) {
          currentTime = currentTime.set('minute', 30);
        } else {
          currentTime = currentTime.add(1, 'hour').startOf('hour');
        }
      }
      // 循环生成每个半小时整点的时间点
      let index=0
      while (currentTime.isBefore(threeDaysLater) || currentTime.isSame(threeDaysLater)) {
        timePoints.push({
          index:index,
          value:currentTime.format('YYYY-MM-DD HH:mm')
        });
        currentTime = currentTime.add(30, 'minute'); 
        index++
      }
      // 赋值
      this.Config.selectTimeOption = timePoints
      this.form.spOrderTime=timePoints[0].value
    },

// 获取每隔半小时的三天时间数组
export const getDeliveryTimeList = () => {
  const now = dayjs(); // 获取当前时间
  const threeDaysLater = now.add(3, 'day').endOf('day'); // 3天后的日期
  const timePoints: { index: number; value: string }[] = []; // 明确声明数组类型
  let currentTime = now.startOf('hour');
  
  // 如果当前时间不是00分或30分，则跳到下一个半小时整点
  if (currentTime.minute() !== 0 && currentTime.minute() !== 30) {
    if (currentTime.minute() < 30) {
      currentTime = currentTime.set('minute', 30);
    } else {
      currentTime = currentTime.add(1, 'hour').startOf('hour');
    }
  }
  
  // 循环生成每个半小时整点的时间点
  let index = 0;
  while (currentTime.isBefore(threeDaysLater) || currentTime.isSame(threeDaysLater)) {
    timePoints.push({
      index: index,
      value: currentTime.format('YYYY-MM-DD HH:mm')
    });
    currentTime = currentTime.add(30, 'minute'); 
    index++;
  }
  
  return timePoints;
};

// 获取每隔半小时的三天时间数组
export const getDeliveryTimeList = () => {
  const now = dayjs(); // 获取当前时间
  const threeDaysLater = now.add(3, 'day').endOf('day'); // 3天后的日期
  const timePoints: { index: number; value: string }[] = []; // 明确声明数组类型
  let currentTime = now;

  // 调整当前时间到最近的10分钟整点
  const minutes = currentTime.minute();
  const remainder = minutes % 10;
  if (remainder !== 0) {
    currentTime = currentTime.add(10 - remainder, 'minute');
  }

  // 循环生成每个10分钟整点的时间点
  let index = 0;
  while (currentTime.isBefore(threeDaysLater) || currentTime.isSame(threeDaysLater)) {
    timePoints.push({
      index: index,
      value: currentTime.format('YYYY-MM-DD HH:mm')
    });
    currentTime = currentTime.add(10, 'minute');
    index++;
  }

  return timePoints;
};

el-time-select：
并且禁用当前的时间选项

<el-form-item label="配货时间:" prop="dataData">
   <div class="flex">
       <el-date-picker :disabledDate="disabledDate" v-model="formData.dataData" type="date" placeholder="选择日期" class="!w-180px !mr-10px" />
       <el-time-select v-model="formData.dataTime" start='00:00' step='00:30' end='currentTime' placeholder="选择时间" class="!w-148px"/>
    </div>
</el-form-item>

import { disabledDate } from '@/utils/common'

const formData = ref({
  dataData: "",
  dataTime: "",
  deliveryType:1,
  deliveryFalg:0,
  remark:""
})
const currentTime = ref()
currentTime.value = getCurrentTime()

watch([() => formData.value.dataData, () => formData.value.dataTime], () => {
  if (formData.value.dataData && formData.value.dataTime) {
    const date = new Date(formData.value.dataData);
    const formattedDate = formatToDate(date);
    rowData.value.solDeliveryDateStr = formattedDate + ' ' + formData.value.dataTime
  }
})

const getCurrentTime= async () => { 
     const now = new Date();
     return padTime(now.getHours()) + ':' + padTime(now.getMinutes());
},
const padTime= async (value) => { 
    return value.toString().padStart(2, '0');
}

// 禁用今天之前的日期
export const disabledDate = (time) => {
  // 获取当前日期
  const today = new Date()
  // 将时间转换为日期格式
  const currentDate = new Date(today.getFullYear(), today.getMonth(), today.getDate())
  // 禁用早于当前日期的日期
  return time.getTime() < currentDate.getTime()
}

发现一个问题：上面代码当前时间超过2024-11-14 10：:01,但是2024-11-14 10：:00还是出来了

import dayjs from 'dayjs';

export const getDeliveryTimeList = () => {
  const now = dayjs(); // 获取当前时间
  const threeDaysLater = now.add(3, 'day').endOf('day'); // 3天后的日期
  const timePoints: { index: number; value: string }[] = []; // 明确声明数组类型
  let currentTime = now;

  // 如果当前时间不是00分或30分，则跳到下一个半小时整点
  if (currentTime.minute() !== 0 && currentTime.minute() !== 30) {
    if (currentTime.minute() < 30) {
      currentTime = currentTime.set('minute', 30).set('second', 0).set('millisecond', 0);
    } else {
      currentTime = currentTime.add(1, 'hour').startOf('hour');
    }
  }

  // 循环生成每个半小时整点的时间点
  let index = 0;
  while (currentTime.isBefore(threeDaysLater) || currentTime.isSame(threeDaysLater)) {
    timePoints.push({
      index: index,
      value: currentTime.format('YYYY-MM-DD HH:mm')
    });
    currentTime = currentTime.add(30, 'minute');
    index++;
  }

  return timePoints;
};