说下思路
开始时间+天数=结束日期
问题:
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')
}
}