<el-date-picker>组件选择开始时间,结束时间自动延长30min

news2024/9/29 17:38:02

背景:选择开始时间,结束时间自动增加30分钟,结束时间也可重新选择,如图:

 

        <el-form-item label="预约开始时间" prop="value1">
            <el-date-picker
              size="large"
              v-model="ruleForm.value1"
              type="datetime"
              placeholder="选择日期时间"
              @change="changeStartTime"
            >
            </el-date-picker>
        </el-form-item>
           <el-form-item label="预约结束时间" prop="value2">
            <el-date-picker
              size="large"
              v-model="ruleForm.value2"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
        </el-form-item>

   ruleForm: {
         value1: '', //预约时间-开始
         value2: '', //预约时间-结束
     }

 //选择开始时间
    changeStartTime() {
        this.ruleForm.value2 = new Date( 
        //将结束时间由时间戳化为标准时间
        this.ruleForm.value1.getTime() + 60 * 1000 * 30 
        //将开始时间化为时间戳,后增加30min即为结束时间的时间戳
      );
    },

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

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

相关文章

Vue2 第三节 数据代理和事件处理

1.Object.defineProperty 方法 2.数据代理 3.Vue中的数据代理 4.事件的基本使用 5.事件修饰符 6.键盘事件 一.Object.defineProperty 方法 &#xff08;1&#xff09;学习Object.defineProperty为下一节数据代理做准备 &#xff08;2&#xff09;更加高级的给对象添加属…

两个csv进行根据相同字段进行合并

源文件&#xff0c;第一列&#xff0c;编号0 目标文件&#xff0c; 编号3 根据社区名称进行匹配&#xff0c;然后将第一个csv文件的经纬度添加到第二个文件中。 import csvsource r"D:\000datasets\链家房价数据\2020去重后社区名称地理编码.csv" target r"…

TAURI桌面平台制作应用程序工具包初体验

原文&#xff1a;https://tauri.app/zh-cn/v1/guides/getting-started/setup/html-css-js 前提&#xff1a;https://tauri.app/zh-cn/v1/guides/getting-started/prerequisites 步骤1&#xff1a; 在 D:\MyStudy\TauriDemo 文件夹下新建 ui 文件夹&#xff0c;在 ui 文件夹中…

QChart笔记5:Polar Chart极坐标用法

QChart还有专门画极坐标的类QPolarChart&#xff0c;它的界面是一个圆盘。 #include <QApplication> #include <QDebug> #include <QtCharts/QScatterSeries> #include <QtCharts/QLineSeries> #include <QtCharts/QPolarChart> #include <Q…

HR:“抱歉不合适!”,竟是没有满足这项硬性要求?

兼容性测试主要通过人工或自动化的方式&#xff0c;在需要覆盖的终端设备上进行功能用例执行&#xff0c;查看软件性能、稳定性等是否正常。 对于需要覆盖的终端设备&#xff0c;大型互联网公司&#xff0c;像 BAT&#xff0c;基本都有自己的测试实验室&#xff0c;拥有大量终…

资深测试总结,自动化测试-ddt数据驱动yaml文件实战(详细)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 ddt 驱动 yaml/ym…

matplotlib从起点出发(5)_Tutorial_5_sytleSheets

1 使用样式表和rcParams自定义matplotlib 以下是自定义matplotlib的属性和默认样式的提示。 有三种方式来自定义matplotlib: 在运行时设置rcParams&#xff1b;使用样式表&#xff1b;改写matplotlibrc文件。 在运行时设置rcParams优先于样式表&#xff0c;样式表优先于matp…

用户分享|当我升级了 CloudQuery 2.2.0 后......

导读&#xff1a; 7 月 13 日&#xff0c;CloudQuery&#xff08;下文简称 CQ&#xff09; 2.2.0 版本正式发布&#xff0c;在看到官方文档对新版本的介绍后&#xff0c;马上进行安装测试。本文主要为大家介绍从 CQ 1.4.2 升级到 2.2 的考量因素、测试情况&#xff0c;分享一些…

SCO 267,1656261-09-4,是一种变构GPR40全激动剂

资料编辑|陕西新研博美生物科技有限公司小编MISSwu 产品结构式&#xff1a; ​ 产品规格&#xff1a; SCO-267 1.CAS号&#xff1a;1656261-09-4 2.分子式&#xff1a;C36H46N4O5 3.分子量&#xff1a;614.79 4.包装规格&#xff1a;1g、5g、10g&#xff0c;包装灵活 5.外观颜…

【图像分类】CNN + Transformer 结合系列.1

介绍三篇结合使用CNNTransformer进行学习的论文&#xff1a;CvT&#xff08;ICCV2021&#xff09;&#xff0c;Mobile-Former&#xff08;CVPR2022&#xff09;&#xff0c;SegNetr&#xff08;arXiv2307&#xff09;. CvT: Introducing Convolutions to Vision Transformers, …

ping命令

上图为IA ping B的过程&#xff0c;在此过程中&#xff1a; 包传送在x位置时&#xff0c;DestMacB左&#xff0c;SourceMacMac_A&#xff0c;Dest ipIp_B,Src_ipIp_A包传送在y位置时&#xff0c;DestMacB右&#xff0c;SourceMacB左 &#xff0c; Dest ipIp_B,Src_ipIp_A MAC…

想学Python高级编程?这个技巧你不能错过!

前言 熟悉Python的朋友都知道&#xff0c;Python有一个让人又爱又恨的特点&#xff1a;数据类型的定义和使用非常的灵活。 在编写一个简易脚本的时候&#xff0c;这个特点让编程难度显著下降&#xff1b;但如果你需要编写一个大型程序&#xff0c;而且还需要多人协作时&#…

电磁波定义、特性以及信道相关知识

文章目录 前言一、电磁波的定义、特性、波谱1、电磁波的特性2、电磁波谱的划分及用途 二、地球大气层的结构三、电磁波的传播方式1、地波&#xff08;ground-wave&#xff09;2、天波&#xff08;sky-wave&#xff09;3、视线传播&#xff08;line-of-sight&#xff09;①、相关…

Spread for Winform 16.2.20231.0 (SP2) Crack

Spread for Winform 16.2.20231.0 (SP2)发布。此版本包含针对客户报告的问题的重要修复&#xff1a; 安装版本 16 后&#xff0c;FarPoint.Localization.dll 将丢失。 将数据绑定到 Spread 时会出现 InvalidOperationException。 通过 Spread Designer 设置的上标将不会保留。…

视频加密的两种常见的方式数字版权管理和加密算法与应用

视频加密的两种常见的方式数字版权管理和加密算法与应用实例&#xff1a; 数字版权管理&#xff08;DRM&#xff09;对视频做加密处理。 数字版权管理是指使用数字版权管理技术对视频内容进行加密和保护。这可以通过给视频文件添加特殊的加密标识符、许可证或者限制访问的方式…

SpringBoot——整合Redis

简单介绍 redis是一款key-velue存储结构的内存级NoSQL数据库 - 支持多种数存储格式- 支持持久化- 支持集群 简单理解成一个大Map&#xff0c;反正我就是这么理解的。当然他的内部有很多复杂的数据类型和操作&#xff0c;咱们在这里就不过多赘述了。 安装并简单的使用Redis …

JVM-类加载

1.了解冯诺依曼计算机结构 1.1计算机处理数据过程 (1)提取阶段:由输入设备把原始数据或信息输入给计算机存储器存起来 (2)解码阶段:根据CPU的指令集架构(ISA)定义将数值解译为指令 (3)执行阶段:再由控制器把需要处理或计算的数据调入运算器 (4)最终阶段:由输出设备把最后运…

postgresql13远程连接报错 Connection to 117.50.184.237:5432 refused. Check that the hostname and port are c

报错信息 Connection to hostname:port refused. Check that the hostname and port are correct and that the postmaster is accepting TCP/IP connections. Connection refused: no further information 解决方案 修开配置文件 vim /var/lib/pgsql/13/data/postgresql.conf…

二叉树某个节点的深度

微信公众号&#xff1a;码云成化 关注可了解更多的教程及进阶技巧。问题或建议&#xff0c;请公众号留言;如果你觉得阿云对你有所帮助&#xff0c;欢迎赞赏 深度的定义 [ 当前结点的层数。默认叶子节点是 null 节点&#xff0c;深度是 0 。其子节点是 null 节点&#xff0c;深…

JAVA基础-多线程入门(详解)

目录 引言 一&#xff0c;线程概念 二&#xff0c;创建线程 2.1&#xff0c;继承Thread类&#xff0c;重写run方法 2.2&#xff0c;实现Runnable接口&#xff0c;重写run方法&#xff0c;实现Runnable接口的实现类的实例对象作为Thread构造函 数的target 2.3&#xff0c;通…