<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即为结束时间的时间戳
      );
    },
相关推荐
AI3D_WebEngineer几秒前
企业级业务平台项目设计、架构、业务全解之平台篇
前端·javascript·vue
汤姆Tom18 分钟前
前端转战后端:JavaScript 与 Java 对照学习指南 (第二篇 - 基本数据类型对比)
java·javascript·全栈
七月十二18 分钟前
【Vite】离线打包@iconify/vue的图标
前端·vue.js
星空的资源小屋19 分钟前
Explorer++:更强大的Windows文件管理器
javascript·人工智能·django·电脑
米花丶20 分钟前
解决前端监控上报 Script Error实践
前端·javascript
深色風信子33 分钟前
Vue 富文本编辑器
前端·javascript·vue.js·wangeditor·vue 富文本·wangeditor-text·前端富文本
程序定小飞1 小时前
基于SpringBoot+Vue的常规应急物资管理系统的设计与实现
java·开发语言·vue.js·spring boot·后端·spring
网络点点滴1 小时前
Vue3路由query参数
前端·javascript·vue.js
我叫张小白。2 小时前
Vue3 Hooks:逻辑复用的解决方案
前端·javascript·vue.js·前端框架·vue
IT·小灰灰2 小时前
深度解析重排序AI模型:基于硅基流动API调用多语言重排序AI实战指南
java·大数据·javascript·人工智能·python·数据挖掘·php