hellow小伙伴们，我又来了，最近有一个项目需求，需要做一个金额分期功能，每一期的金额和日期都是根据按月或按周分期和需要分的期数动态渲染出来的，因为这个开发了俩套，一套pc端一套移动端，因为是用vue框架开发的，所以pc端就选择了element-ui库，移动端当时写的时候也没多想，顺手就用了mint-ui，现在想想真的后悔，在这里给大家个建议，移动端开发的时候还是用iview吧，能不用mint-ui就别用了，爬不完的坑！那么就先给大家从移动端讲起来吧，移动端用的是mint-ui的DatePicker组件，考虑到项目优化，我用的是按需加载，具体怎么实现，请大家自寻搜索，这里就不详细介绍了，先给大家看一下移动端项目效果
项目需求是如果是按月分期的，那么每一期的时间间隔是30天，如果是按周的话就是7天，当选择日期的时候可以提前6天或30天，但是不可以大于当前应还款日期。
首先引入组件
import { DatetimePicker } from "mint-ui";
template
data
startDate:new Date("2019-01-01"); //这个根据需求来定，但是必须给值
methods
//打开日期选择期
openPicker(index) {
this.index1 = index;
this.$refs.picker.open();
},
//点击日期确定
handleConfirm(data) {
var time = Number(this.$moment(data).format("x"));//这里用的是moment.js来转换时间格式
this.countDay(this.index1, time); //传入当前点击下标和当前选择时间
}，
countDay(num, time) {
var arr = [
this.time0,
this.time1,
this.time2,
this.time3,
this.time4,
this.time5
];//定义对应分期的变量，用于比较；
if (time > arr[num]) {
//当选择时间大于初始默认时间时重新赋值到初始时间；
this.$Message.warning("选择日期不能大于当前默认日期");
this.tableData[num].repaymentDate = arr[num];//重新赋值
} else if (time === arr[num]) {
this.tableData[num].repaymentDate = time;
return true;
} else {
//小于
let day = Math.floor((arr[num] - time) / (24 * 3600 * 1000));
var days = this.value1 === "1" ? 7 : 30;
if (day >= days) {
//判断是否大于7天或30天，大于的话就重新赋值到初始值
this.tableData[num].repaymentDate = arr[num];
this.$Message.warning(`选择日期不能小于当前默认日期${days}天`);
} else {
//可以修改
this.tableData[num].repaymentDate = time;
}
}
}
},
在这里原来用的是用当前获取到的时间去和需要比较的时间戳作对比，然后去控制所选的值。当然只是根据我的业务给大家扩展了一点，对你们没帮助的也请勿喷。下面再来说一下element-ui的日期选择器，其实和上边实现的原理是一样的，但是在这里再给大家分享另外一种控制时间不可选的方法，下边给大家举个设置选择七天之前到今天的日期
template
<el-date-picker
v-model="time1"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions"
>
</el-date-picker>
data
return {
pickerOptions:{
disabledDate(time){
let now = Date.now(),
timestamp= 7 * 24 * 60 * 60 * 1000,
var evenDays = now - timestamp;
return time.getTime() > _now || time.getTime() < sevenDays;
//大于当前的禁止，小于7天前的禁止
}
}
}
还有另外一种限制结束日期不能大于开始日期
template
<el-date-picker
v-model="startTime"
type="date"
placeholder="开始日期"
:picker-options="pickerOptions0">
</el-date-picker>
<el-date-picker
v-model="endTime"
type="date"
placeholder="结束日期"
:picker-options="pickerOptions1">
</el-date-picker>
data
return {
pickerOptions0: {
disabledDate: (time) => {
if (this.endTime != "") {
return time.getTime() > Date.now() || time.getTime() > this.endTime;
} else {
return time.getTime() > Date.now();
}
}
},
pickerOptions1: {
disabledDate: (time) => {
return time.getTime() < this.startTime || time.getTime() > Date.now();
}
}
}
欢迎大家在下边留言交流，共同进步!
