vue+moment根据开始日期和周期(月份~天)计算结束日期
以月份为周期计算A.需求1.需要使用moment插件2.需求:根据开始日期和周期计算下次到期事件B.具体操作1.找到文件目录2.在控制台输入命令npm install moment --save3.package.json中查看(moment插件安装成功)4.在需要的文件引入moment插件1.注意:moment获取天数用get.("dates")<template><el-fo
·
以月份为周期计算
A.需求
1.需要使用moment插件
2.需求:根据开始日期和周期计算下次到期事件
B.具体操作
1.找到文件目录
2.在控制台输入命令
npm install moment --save
3.package.json中查看(moment插件安装成功)
4.在需要的文件引入moment插件
1.注意:moment获取天数用get.("dates")
<template> <el-form-item label="检定时间" prop="fVerificationDate" > <el-date-picker v-model="dataForm.fVerificationDate" type="date" placeholder="选择日期" @input="fVerificationCycleCalculate2" > </el-date-picker> </el-form-item> <el-form-item label="检定周期/月" prop="fVerificationCycle"> <el-input v-model="dataForm.fVerificationCycle" placeholder="检定周期" @input="fVerificationCycleCalculate2"></el-input> </el-form-item> <el-form-item label="下次检定日期" prop="fNextVerificationDate"> <!-- <el-input v-model="dataForm.fNextVerificationDate" placeholder="下次检定日期"></el-input> --> <el-date-picker v-model="dataForm.fNextVerificationDate" type="date" placeholder="选择日期" disabled> //disabled 去掉可修改 </el-date-picker> </el-form-item> </template> <script> //引入moment组件 注意最下面需要添加 components:{moment}, import moment from 'moment' export default { data () { return { dataForm{ fVerificationCycle: '', fNextVerificationDate: '', fVerificationDate: '', }, } }, methods:{ //检定周期计算/月 fVerificationCycleCalculate2(){ //判断检定时间,和周期不为空 if(this.dataForm.fVerificationDate != null&&this.dataForm.fVerificationCycle !=''){ console.log(this.dataForm.fVerificationDate) var a=moment(this.dataForm.fVerificationDate) var b=parseInt(this.dataForm.fVerificationCycle) var y=a.get('years') var m=a.get('months') var d=a.get('dates') //特别注意:这里获取天数用 get("dates") // var d=moment.duration(a).asDays() //计算月份 获取月份+1加周期月份b var ms=m+1+b if(parseInt(ms/12)>0){//大于12个月轮换一年 y=y+(parseInt(ms/12)) ms=ms-12*(parseInt(ms/12)) } if(ms==0){//无0月,元月及1月。 ms=1 } var z =y + "-" + (ms < 10 ? ("0" + ms) : ms) + "-" + (d < 10 ? ("0" + d) : d) + ''; this.dataForm.fNextVerificationDate=z } }, }, components:{moment}, } </script>
以天数为周期计算结束时间
1.直接上代码
注意:开始日期格式为时间戳
<template>
<el-form-item label="检定时间" prop="fVerificationDate" >
<el-date-picker
v-model="dataForm.fVerificationDate"
type="date"
value-format="timestamp"
placeholder="选择日期" @input="fVerificationCycleCalculate2"
>
</el-date-picker>
</el-form-item>
<el-form-item label="检定周期/月" prop="fVerificationCycle">
<el-input v-model="dataForm.fVerificationCycle" placeholder="检定周期" @input="fVerificationCycleCalculate2"></el-input>
</el-form-item>
<el-form-item label="下次检定日期" prop="fNextVerificationDate">
<!-- <el-input v-model="dataForm.fNextVerificationDate" placeholder="下次检定日期"></el-input> -->
<el-date-picker
v-model="dataForm.fNextVerificationDate"
type="date"
placeholder="选择日期" disabled> //disabled 去掉可修改
</el-date-picker>
</el-form-item>
</template>
<script>
//引入moment组件 注意最下面需要添加 components:{moment},
import moment from 'moment'
export default {
data () {
return {
dataForm{
fVerificationCycle: '',
fNextVerificationDate: '',
fVerificationDate: '',
},
}
},
methods:{
//检定周期计算/天
fVerificationCycleCalculate(){ //日期传入格式为时间戳格式 value-format="timestamp"
console.log("检定时间:"+this.dataForm.fVerificationDate) ;
console.log("检定周期"+(this.dataForm.fVerificationCycle));
if(this.dataForm.fVerificationDate != null&&this.dataForm.fVerificationCycle !=''){
console.log("检定周期"+(this.dataForm.fVerificationCycle)*(24 * 60 * 60 * 1000));
this.dataForm.fNextVerificationDate=this.dataForm.fVerificationDate+((this.dataForm.fVerificationCycle)*(24 * 60 * 60 * 1000))
console.log("下次检定日期"+this.dataForm.fNextVerificationDate);
}
},
},
components:{moment},
}
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)