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

背景:选择开始时间,结束时间自动增加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即为结束时间的时间戳
      );
    },
相关推荐
一 乐8 小时前
点餐|智能点餐系统|基于java+ Springboot的动端的点餐系统小程序(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·小程序·论文
视图猿人8 小时前
RxJS基本使用及在next.js中使用的例子
开发语言·javascript
bitbitDown8 小时前
从零打造一个 Vite 脚手架工具:比你想象的简单多了
前端·javascript·面试
冴羽10 小时前
为什么在 JavaScript 中 NaN !== NaN?背后藏着 40 年的技术故事
前端·javascript·node.js
久爱@勿忘10 小时前
vue下载项目内静态文件
前端·javascript·vue.js
前端炒粉10 小时前
21.搜索二维矩阵 II
前端·javascript·算法·矩阵
不爱吃糖的程序媛11 小时前
Electron 应用中的系统检测方案对比
前端·javascript·electron
pe7er11 小时前
用高阶函数实现递归:从匿名函数到通用递归生成器
前端·javascript
Jonathan Star11 小时前
NestJS 是基于 Node.js 的渐进式后端框架,核心特点包括 **依赖注入、模块化架构、装饰器驱动、TypeScript 优先、与主流工具集成** 等
开发语言·javascript·node.js
矢心11 小时前
setTimeout 和 setInterval:看似简单,但你不知道的使用误区
前端·javascript·面试