antd-vue datepicker根据开始时间和天数,算出结束日期

在这里插入图片描述
说下思路
开始时间+天数=结束日期
问题:
1.开始日期如果add(天数)后,会改变开始日期本身
2.深拷贝开始日期的moment对象后,打印出来会发现有点变化,且拷贝过的moment对象不能使用add方法
3.因为以上两点,导致不能给datapicker赋值,都先不管值对不对了,数据改变了但是页面没变化
解决方法:

npm install --save moment-immutable-methods

代码如下:

        <div class="input-row">
          <div class="input-head">质保起始日期:</div>
          <div class="input-box">
            <a-date-picker v-model="qualityBegin" @changeQualityBegin='changeQualityBegin' />
          </div>
        </div>

        <div class="input-row">
          <div class="input-head">质保期限/月:</div>
          <div class="input-box">
            <a-input-number :min="0" v-model="qualityTime" @change="onChangeInput" allowClear/>
          </div>
        </div>
        <div class="input-row">
          <div class="input-head">质保截止日期:</div>
          <div class="input-box">
            <a-date-picker
                    v-model="qualityEnd"
            />
          </div>
        </div>
import { momentImmutableMethods } from 'moment-immutable-methods'
import moment from 'moment' // 没有安装moment的先安装moment
momentImmutableMethods(moment)
data() {
     qualityBegin: this.$moment(),
      qualityEnd: this.$moment(),
      qualityTime: "",
},
methods(){
    // 监听日期输入框(已有开始日期,监听天数输入框)
    onChangeInput(e){
      var qualityBegin = this.qualityBegin
      this.qualityEnd = qualityBegin.addImmu(e,'months') //我这里是月,所以是months,其他参数去看文档
    },
    // 监听开始日期改变(已有天数,监听开始日期)
     if(this.qualityTime){
        var qualityBegin = e
        var qualityTime = this.qualityTime
        this.qualityEnd = qualityBegin.addImmu(qualityTime,'months')
      }
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值