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
    }
  },

效果图:

相关推荐
洪洪呀19 分钟前
uni-app vue3 实现72小时倒计时功能
vue.js·uni-app
好_快33 分钟前
Lodash源码阅读-without
前端·javascript·源码阅读
好_快36 分钟前
Lodash源码阅读-baseDifference
前端·javascript·源码阅读
萌萌哒草头将军8 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
游离状态的猫18 小时前
JavaScript性能优化实战:从瓶颈定位到极致提速
开发语言·javascript·性能优化
小彭努力中8 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊9 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
滿9 小时前
Vue3 Element Plus el-tabs数据刷新方法
javascript·vue.js·elementui
LinDaiuuj9 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝9 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js