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

效果图:

相关推荐
勘察加熊人1 小时前
vue记忆卡牌游戏
javascript·vue.js·游戏
醋醋1 小时前
Vue2源码记录3
前端·vue.js
yanyu-yaya1 小时前
第三章 react redux的学习之redux和react-redux,@reduxjs/toolkit依赖结合使用
javascript·学习·react.js
江城开朗的豌豆1 小时前
使用Plotly.js创建炫酷红外轮廓热力图 - Vue组件封装实战
前端·javascript·vue.js
安大桃子1 小时前
🚀《突破传统!打造高自由度弹窗组件的终极方案》—— 用这个Vue组件重新定义弹窗交互
前端·vue.js
李恩泽的博客1 小时前
快速学会 Vue-Axios
vue.js
牧野星辰1 小时前
学会了一个小功能,我们庆祝一下【高德API-输入提示和POI搜索】
javascript·vue.js
打野赵怀真2 小时前
react组件间的通信有哪些?
前端·javascript
哟哟耶耶2 小时前
React-02初学hello_react(JSX,创建React根节点,引入对应React库,render渲染DOM)
前端·javascript·react.js
Enddme2 小时前
《面试官冷笑:箭头函数能当构造函数吗?答错直接挂!》
前端·javascript·面试