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

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

今天遇到需求是配送时间,时隔半个钟的排线!所以需要拼接时间!例如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=0while (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 = timePointsthis.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.rhkb.cn/news/446261.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

优先算法1--双指针

“一念既出&#xff0c;万山无阻。”加油陌生人&#xff01; 目录 1.双指针--移动零 2.双指针-复写零 ok&#xff0c;首先在学习之前&#xff0c;为了方便大家后面的学习&#xff0c;我们这里需要补充一个知识点&#xff0c;我这里所谓的指针&#xff0c;不是之前学习的带有…

如何构建高效的公路工程资料管理系统?

本文介绍了构建高效的公路工程资料管理系统的方法&#xff0c;涵盖了系统需求分析、功能设计、开发平台选择、开发过程、系统上线与培训、持续改进与维护等关键环节。通过合理规划和科学管理&#xff0c;可以确保系统满足用户需求&#xff0c;提高工作效率&#xff0c;保障公路…

react18+react-transition-group实现路由切换过度

效果如下 官网安装对应的插件 创建对应的样式 .fade-enter {opacity: 0; } .fade-exit {opacity: 1; } .fade-enter-active {opacity: 1; } .fade-exit-active {opacity: 0; } .fade-enter-active, .fade-exit-active {transition: opacity 500ms; }const location useLoca…

STM32 | STM32F4OTA_ESP8266_Bootloader为引导程序远程更新的代码(APP)

更新。点击上方"蓝字"关注我们 01、思路 >>> STM32F4OTA_ESP8266_Bootloader为引导程序 远程更新的代码&#xff08;APP&#xff09;:远程更新的APP Ymoden_server&#xff1a;为运行在Linux的TCP服务器 备注&#xff1a;STM32 OTA远程更新需要连接热点 电…

【实战项目】——Boost搜索引擎(五万字)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、项目的相关背景 1.1、什么是Boost库&#xff1f; 1.2、什么是搜索引擎&#xff1f; 1.3、为什么要做Boost库搜索引擎&#xff1f; 二、搜索引擎的宏观原…

【优选算法篇】双指针的优雅舞步:C++ 算法世界的浪漫探索

文章目录 C 双指针详解&#xff1a;基础题解与思维分析前言第一章&#xff1a;对撞指针1.1 移动零解题思路图解分析C代码实现易错点提示代码解读 1.2 复写零解题思路算法步骤C代码实现易错点提示代码复杂度 1.3 盛最多水的容器1. 题目链接2. 题目描述解法一&#xff08;暴力求解…

MySQL SELECT 查询(三):查询常用函数大全

MySQL SELECT 查询&#xff08;三&#xff09;&#xff1a;查询常用函数大全 1. 单行函数 单行函数是 SQL 中一类重要的函数&#xff0c;它们可以对单行数据进行处理&#xff0c;并返回单个结果。单行函数可以嵌套使用&#xff0c;并提供灵活的数据处理能力。 1.1 定义 只对单…

H7-TOOL的LUA小程序教程第14期:任意波形信号发生器,0-20mA输出和微型数控电源(2024-10-11,已更新)

LUA脚本的好处是用户可以根据自己注册的一批API&#xff08;当前TOOL已经提供了几百个函数供大家使用&#xff09;&#xff0c;实现各种小程序&#xff0c;不再限制Flash里面已经下载的程序&#xff0c;就跟手机安装APP差不多&#xff0c;所以在H7-TOOL里面被广泛使用&#xff…

矩阵系统源码搭建,oem贴牌,技术指导

一、技术选型与整合 多种技术的融合 矩阵系统通常需要整合多种技术&#xff0c;包括前端技术、后端技术、数据库技术、服务器技术等。选择合适的技术栈并确保它们能够良好地协同工作是一个挑战。例如&#xff0c;前端可能使用 React 或 Vue.js&#xff0c;后端可能使用 Java Sp…

解决新版Android studio不能连接手机的问题

我要说的是一个特例&#xff0c;装了22年的版本AS可以正常连接手机&#xff0c;装了23年以后新版本&#xff0c;AS不能正常连接手机了&#xff0c;但是在CMD控制台可以正常的执行adb命令&#xff0c;并且CMD和AS都是指向D:\android_sdk\platform-tools\adb.exe 一、 为什么会出…

消息队列面试题——第二篇

1. rocketmq、rabbitmq、kafka的区别 架构设计和消息模型 特性rocketmqrabbitmqkafka消息模型基于主题和消费组&#xff0c;支持发布/订阅和点对点两种模型基于队列模型&#xff0c;支持发布/订阅和点对点两种模型基于分区的主题模型&#xff0c;主要用于日志流式处理和高吞吐…

完成Sentinel-Dashboard控制台数据的持久化-同步到Nacos

本次案例采用的是Sentinel1.8.8版本 一、Sentinel源码环境搭建 1、下载Sentinel源码工程 git clone https://github.com/alibaba/Sentinel.git 2、导入到idea 这里可以先运行DashboardApplication.java试一下是否运行成功&#xff0c;若成功&#xff0c;源码环境搭建完毕&a…

IDEA Sping Boot 多配置文件application Maven动态切换

新建application-dev.yml与application-prod.yml pom.xml文件下添加profiles等 让idea识别出配置文件 <profiles><profile><id>dev</id><properties><!-- 环境标识&#xff0c;需要与配置文件的名称相对应 --><profiles.active>dev&…

基于京东:HotKey实现自动缓存热点Key!!!

一.引言 某些热点数据&#xff0c;我们提前如果能够预判到的话&#xff0c;可以提前人工给数据加缓存&#xff0c;也就是缓存预热&#xff0c;将其缓存在本地或者Redis中&#xff0c;提高访问性能同时&#xff0c;减低数据库压力&#xff0c;也减轻后端服务的压力。但是&#…

大顶堆优化dp,带限制的子序列

前言&#xff1a;看到这个题目的时候我们可以用大顶堆记录前面的最大值&#xff0c;这样我们转移的时候就少了很多繁琐的查询 题目地址 class Solution { public:int constrainedSubsetSum(vector<int>& nums, int k) {int n nums.size();vector<int> ans nu…

【计算机网络 - 基础问题】每日 3 题(三十八)

✍个人博客&#xff1a;https://blog.csdn.net/Newin2020?typeblog &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/fYaBd &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 C 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞…

小米路由器刷机istoreOS,愉快上网

istoreOS与openwrt openwrt是一个开源的路由器系统&#xff0c;市场上所有小米路由器的内部系统都是基于openwrt进行二次开发形成的&#xff0c;做了硬件适配和功能上的阉割&#xff0c;不太好用。 istoreos是小宝团队基于openwrt制作的一个发行版&#xff0c;更适合中国宝宝体…

计算机网络:数据链路层 —— 网络适配器与 MAC 地址

文章目录 网络适配器使用网络适配器网络适配器类型 MAC 地址MAC 地址格式MAC 地址类型MAC 地址发送顺序数据接收MAC 地址泄露问题 网络适配器 要将计算机连接到以太网&#xff0c;需要使用相应的网络适配器&#xff08;Adapter)&#xff0c;网络适配器一般简称为“网卡”。在计…

AirServer v7.2.7 破解版 – iPhone屏幕镜像工具

AirServer v7.2.7 破解版 – iPhone屏幕镜像工具可以将你的Mac转变为一个通用的镜像接收器&#xff0c;除了无法接收Miracast外&#xff0c;你可以使用内置的AirPlay或Google Cast基于屏幕投影功能来镜像你的设备屏幕&#xff1b;一次一个或同时投影到AirServer。用户可以从任何…

TGRS 2024 面向雾天遥感图像的定向目标检测算法

TGRS 2024 | 面向雾天遥感图像的定向目标检测算法 论文信息 摘要 目前&#xff0c;大量工作集中在航空目标检测上&#xff0c;并取得了良好的结果。尽管这些方法在传统数据集上取得了有希望的结果&#xff0c;但在恶劣天气条件下捕获的低质量图像中定位对象仍然具有挑战性。目…