<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即为结束时间的时间戳
      );
    },
相关推荐
大流星7 分钟前
LangChainJs之Prompt提示词(二)
javascript·langchain
何时梦醒12 分钟前
前端存储全攻略 & JavaScript this 绑定完全指南
前端·javascript·面试
前端百草阁16 分钟前
JavaScript 设计模式(23 种)
开发语言·前端·javascript·设计模式
晓得迷路了1 小时前
栗子前端技术周刊第 136 期 - pnpr、Flow 重构移植 Rust、Astryx...
前端·javascript·css
Mr.Daozhi1 小时前
从零构建 AI 学术论文助手(四):PDF.js 实时截图 + Gemini 视觉分析
javascript·人工智能·pdf·canvas·pdf.js·gemini
乌夷2 小时前
Vue.js 3 的设计思路
前端·javascript·vue.js
前端之虎陈随易11 小时前
编程语言级别的Skill市场,AI Agent 的未来形态
前端·vue.js·人工智能·typescript·node.js
kyriewen12 小时前
豆包和千问同时关了智能体,我用它们搭的 3 个自动化全废了——迁移方案整理
前端·javascript·ai编程
铁皮饭盒12 小时前
用 Bun.cron 定时 7 月 7 日,为啥? 看图1
javascript
格子软件14 小时前
2026年GEO贴牌代理:分布式多级分账状态机源码深度解构
java·vue.js·分布式·vue·geo