<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即为结束时间的时间戳
      );
    },
相关推荐
梨涡泥窝21 分钟前
JavaWeb——基于 Spring Boot + Vue 的图书管理系统的设计与实现
vue.js·spring boot·后端
宁风44 分钟前
JavaScript:函数体系-1
前端·javascript
oooo_z1 小时前
美股历史K线数据API接口选型指南:iTick覆盖1分钟到月线全周期
服务器·前端·javascript
mONESY2 小时前
LangChain 结构化输出三兄弟:ToolCall、OutputParser、withStructuredOutput 彻底讲透
javascript
知兀2 小时前
【前端】受控和非受控组件
前端·javascript·react
晴天162 小时前
JavaScript 与 Java 垃圾回收机制对比
java·开发语言·javascript
huali2 小时前
vue-split-screen:让 Vue Router 的导航轨迹变成两个页面
前端·javascript·vue.js
bug总结3 小时前
uniapp总结
开发语言·前端·javascript
走到天涯海角3 小时前
pinia和Vuex的区别以及使用pinia
开发语言·前端·javascript
晴天163 小时前
Web 页面内存溢出与 CPU 溢出:区别、诊断与最佳实践
前端·javascript