el-date-picker手动输入日期,通过设置开始时间和阶段自动填写结束时间

需求:根据开始时间,通过填写阶段时长,自动填写结束时间,同时开始时间和节数时间可以手动输入

代码如下:

html 复制代码
 <el-form ref="ruleForm2" :rules="rules2" :model="formData" inline label-position="right" label-width="120px"> 
         <el-form-item label="开始时间" prop="beginTime">
            <el-date-picker
              v-model="formData.beginTime"
              v-elDateFormat
              editable
              value-format="timestamp"
              type="date"
              placeholder="请选择日期"
              clearable
              style="width: 180px"
              @change="changeEndTime"
            />
          </el-form-item>
          <!-- 添加一个阶段时长 -->
          <el-form-item label="阶段时长" prop="stageDuration">
            <el-input v-model="formData.stageDuration" style="width: 180px"  @blur="stageDurationBlur" />
            <span class="span_style">(最小单位半月)</span>
          </el-form-item>
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker
              v-model="formData.endTime"
              v-elDateFormat
              editable
              value-format="timestamp"
              type="date"
              placeholder="请选择日期"
              clearable
              style="width: 180px"
            />
          </el-form-item>
</el-form>
javascript 复制代码
    changeEndTime(time) {
//这里是项目的一个判断 与主体逻辑无关
      if (this.formData.stageNature == 'point') {
        // this.formData.endTime = this.timestampToYYYYMMDD(time)
        this.formData.endTime = time
      } else {
        this.calculateEndDate()
      }
    },
    stageDurationBlur(e) {
      if (this.formData.stageNature !== 'point' && this.formData.beginTime &&             
         e.target.value) {
        this.calculateEndDate()
      }
    },
    calculateEndDate() {
      if (this.formData.beginTime && this.formData.stageDuration) {
        const beginTime = new Date(this.formData.beginTime)
        const duration = parseFloat(this.formData.stageDuration)
        if (!isNaN(duration) && duration > 0) {
          const daysToAdd = Math.floor(duration * 15) // 将输入的值乘以15天
          const endTime = new Date(beginTime)
          endTime.setDate(beginTime.getDate() + daysToAdd)
          this.formData.endTime = endTime.getTime()
        } else {
          this.formData.endTime = ''
        }
      }
    },

手动输入日期,默认回显日期功能 ,我这边后端参数需要的是时间戳,使用时需要看清楚后端需要的数据类型

javascript 复制代码
  watch: {
    formData: {
      handler(newValue, oldValue) {
        if (newValue.beginTime && newValue.beginTime != '') {
          // 判断有没有横杠  输入的日期 格式是 2024-07-15的,或者是20240715这种 
          if (typeof newValue.beginTime === 'string' && newValue.beginTime.indexOf('-') == -1) {
            let str = newValue.beginTime
            const positions = [4, 6]
            const char = '-'
            for (let i = positions.length - 1; i >= 0; i--) {
              const position = positions[i]
              str = str.substring(0, position) + char + str.substring(position)
            }
            this.formData.beginTime = str
          }
        } else {
          this.formData.beginTime = ''
        }
      },
      immediate: true,
      deep: true
    }
  },

效果图:

相关推荐
Devil枫2 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
GIS程序媛—椰子3 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山4 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享4 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果4 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄5 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰5 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf6 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
薛一半7 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
过期的H2O27 小时前
【H2O2|全栈】JS进阶知识(四)Ajax
开发语言·javascript·ajax