<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即为结束时间的时间戳
      );
    },
相关推荐
达子6661 小时前
第22章_HarmonyOs开发图解之 蓝牙
vue.js
mONESY1 小时前
React + TypeScript 入门到进阶:从 Props 类型约束到状态管理与副作用最佳实践
javascript
无人生还1 小时前
从 Vue3 到 React · 快速上手系列第 9 篇:自定义 Hook(对标 Composables)
前端·vue.js·react.js
码哥DFS2 小时前
算法练习day1-备战2027届秋招
前端·javascript·数据结构·算法
张元清2 小时前
React useInfiniteScroll Hook:无限滚动轻松实现(2026)
javascript·react.js
别怪我很水2 小时前
Vue element admin 浏览器本地存储 localStorage、useStorage
前端·javascript·vue.js
晓得迷路了2 小时前
栗子前端技术周刊第 140 期 - pnpm、Node 新 API 文档网站、Oxlint...
前端·javascript·node.js
烬羽3 小时前
一个队列,怎么让滑动窗口从 O(nk) 变 O(n)?单调队列彻底搞懂
javascript·数据结构·算法
猫猫不是喵喵.13 小时前
Vue3 Props 属性
前端·javascript·vue.js
jarvisuni17 小时前
DeepSeekFlash前端依旧拉垮,而且变慢了很多!
前端·javascript·算法