<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即为结束时间的时间戳
      );
    },
相关推荐
无业哥25 分钟前
Vue&ElementPlus 按需导入
vue.js
蓝胖子的小叮当1 小时前
JavaScript基础(十二)高阶函数、高阶组件
前端·javascript
掘金012 小时前
震惊!Vue3 竟能这样写?React 开发者狂喜的「Vue-React 缝合怪」封装指南
javascript·vue.js·react.js
毕了业就退休2 小时前
websocket 的心跳机制你知道几种
前端·javascript·http
Juchecar2 小时前
TypeScript 与 JavaScript 的关系及学习建议
javascript
JohnYan2 小时前
Bun技术评估 - 25 Utils(实用工具)
javascript·后端·bun
徐小夕2 小时前
花3个月时间,写了一款协同文档编辑器
前端·vue.js·算法
Dream耀3 小时前
FitKick 电商APP项目总结二
前端·javascript·react.js
我要成为Java糕手3 小时前
支付宝芝麻免押支付集成指南及技术对接验收(Java版)
javascript·后端
ZsTs1193 小时前
一篇通关:从 MVVM 到渲染优化,Vue 基础核心 5 大模块全解析
前端·vue.js·面试