获取时隔半个钟的三天与el-time-select

news2024/10/17 15:24:50

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

今天遇到需求是配送时间,时隔半个钟的排线!所以需要拼接时间!例如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
    },

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()
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2211795.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Cyber Weekly #28

赛博新闻 1、特斯拉发布无人驾驶汽车Cybercab和Robovan 本周五&#xff08;10月11日&#xff09;&#xff0c;特斯拉公布两款车型Cybercab和Robovan&#xff0c;以及他们的Robotaxi无人驾驶出租车计划。Cybercab没有方向盘&#xff0c;没有充电孔&#xff0c;也没有脚踏板和后…

动态规划的优化与高级应用

姊妹篇&#xff1a; 动态规划基础与经典问题-CSDN博客 贪心算法&#xff1a;原理、应用与优化_最优解-CSDN博客​​​​​​贪心算法&#xff1a;原理、应用与优化_最优解-CSDN博客 一、动态规划的优化策 动态规划在提高时间效率的同时&#xff0c;往往会占用较多的空间。因…

【电商搜索】现代工业级电商搜索技术-中科大-利用半监督学习改进非点击样本的转化率预测

【电商搜索】现代工业级电商搜索技术-中科大-利用半监督学习改进非点击样本的转化率预测 0. 论文信息 RecSys24: Utilizing Non-click Samples via Semi-supervised Learning for Conversion Rate Prediction inproceedings{huang2024utilizing, title{Utilizing Non-click S…

微生物测序报告中的多样性数据详细解读

随着技术的发展&#xff0c;高通量测序技术已成为研究微生物群落的重要工具。这种技术使得科学家们能够解析巨量微生物DNA序列&#xff0c;从而获得丰富的微生物组数据&#xff0c;包括16S rRNA基因、ITS序列和宏基因组。然而&#xff0c;这些数据只是迈向揭示微生物群落复杂性…

docker启动MySQL容器失败原因排查记录

背景 最近在尝试容器搭建MySQL集群时碰到一个错误&#xff0c;启动MySQL时碰到一个&#xff0c;经过排查解决&#xff0c;在此做一个记录 问题过程 1、启动MySQL容器 $ sudo docker run -d -p 3306:3306 \ > --name mysql \ > -v /opt/mysql/log:/var/log/mysql \ &g…

java项目之大型商场应急预案管理系统(源码+文档)

项目简介 大型商场应急预案管理系统实现了以下功能&#xff1a; 大型商场应急预案管理系统的主要使用者管理员功能有个人中心&#xff0c;员工管理&#xff0c;预案信息管理&#xff0c;预案类型管理&#xff0c;事件类型管理&#xff0c;预案类型统计管理&#xff0c;事件类…

【vue】03-指令补充+样式绑定+计算属性+侦听器

代码获取 知识总结 ⼀、指令补充 1.指令修饰符 1.1 什么是指令修饰符&#xff1f; 所谓指令修饰符就是让指令的 功能更强⼤&#xff0c;书写更便捷 1.2 分类 1.2.1 按键修饰符 keydown.enter&#xff1a;当enter键按下时触发 keyup.enter&#xff1a;当enter键抬起时触…

执行powershell脚本出错:未对文件进行数字签名

解决执行powershell脚本时出错&#xff1a;未对文件 \test.ps1进行数字签名。无法在当前系统上运行该脚本 前言 今天从github上下载了一个PowerShell脚本要在本地运行&#xff0c;运行的时候出现了未对文件进行数字签名的问题&#xff0c;然后在这里记录下怎么解决 解决方法…

选择2024年开发App的理由,费用分析与效益

App开发费用受复杂度、团队、地理位置、平台等因素影响。低代码平台如ZohoCreator提供经济高效开发方案&#xff0c;降低费用并提升灵活性。2024年&#xff0c;企业需考虑这些因素制定长期规划。 调查显示&#xff1a; 企业估算应用开发费用时&#xff0c;常采用以下公式&…

大厂面试真题-组合和聚合的区别是什么

组合和聚合比较类似&#xff0c;二者都表示整体和部分之间的关系。 聚合关系的特点是&#xff1a;整体由部分构成&#xff0c;但是整体和部分之间并不是强依赖的关系&#xff0c;而是弱依 赖的关系&#xff0c;也就是说&#xff0c;即使整体不存在了&#xff0c;部分仍然存在…

算法专题六: 模拟与分治快排

目录 模拟1. 替换所有的问号2. 提莫攻击3. Z字形变换4. 外观数列5. 数青蛙分治快排1. 颜色分类2. 排序数组3. 数组中的第K个最大元素4. 库存管理Ⅲ 模拟 1. 替换所有的问号 算法思路: 本题就是简单的模拟, 只需按照题目的思路遍历所有的字符, 如果为?则将其替换, 替换时寻找2…

今日指数项目day8实战权限管理器(上)

3.权限管理器 3.1 权限列表展示功能 1&#xff09;原型效果 2&#xff09;接口说明 功能描述&#xff1a; 查询所有权限集合 服务路径&#xff1a; /api/permissions 服务方法&#xff1a;Get 请求参数&#xff1a;无响应数据格式: {"code": 1,"data":…

Python自然语言处理之pyltp模块介绍、安装与常见操作案例

pyltp是哈尔滨工业大学社会计算与信息检索研究中心推出的一款基于Python封装的自然语言处理工具&#xff0c;它提供了哈工大LTP&#xff08;Language Technology Platform&#xff09;工具包的接口。LTP工具包以其强大的中文分词、词性标注、命名实体识别、依存句法分析等功能&…

Idea不能创建java8切换路径

顶部的Server URL改成https://start.aliyun.com/

Ubuntu配置应用开机自启动

有些自己下载的应用想要配置开机自启动&#xff0c;比如snipaste&#xff0c;steam等&#xff0c;可以通过一下步骤进行配置 点击应用展开图标 这个里面就是开机自启动的一些应用&#xff0c;可以将自己想要自启动的应用添加到这个里面来 以上是snipaste配置&#xff0c;起…

大数据治理:构建数据驱动的智能决策体系

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

RocketMq详解:三、RocketMq通用生产和消费方法改造

文章目录 1.背景2.通用方法改造2.1添加maven依赖2.2 RocketMq基础配置2.3 配置类2.5 消息传输的对象和结果2.4 消息生产者2.5 消息消费者2.6 功能测试 1.背景 在第二章&#xff1a;《RocketMq详解&#xff1a;二、SpringBoot集成RocketMq》中我们已经实现了消费基本生产和消费…

CISCN2022-cactus

这周在疯狂学kernel pwn。 记录一下这题&#xff0c;race conditonmsg_msgpipe_buffer&#xff0c;kaslrsmepsmapkpti。 漏洞很简单&#xff0c;所有操作都没加锁&#xff0c;就是race condition了。edit什么的都只能2次。 很明显了&#xff0c;一次泄露基址&#xff0c;一次劫…

unidbg console debugger 调试技巧

版权归作者所有&#xff0c;如有转发&#xff0c;请注明文章出处&#xff1a;https://cyrus-studio.github.io/blog/ 打开debug日志 编辑 unidbg-android/src/test/resources/log4j.properties 把 log4j.logger.com.github.unidbg.AbstractEmulator 改为 DEBUG 当运行报错时…