elementui日期限制只能选择7天
需求要求日期只能选择7天,无明确需求,然后用了两种方式实现1.直接限制日期上只有7天可以选择,在根据选择的结束时间来,更新可以选择的日期,这样虽然实现了需求,但是用户体验不好2.第二种推荐用户可以自由选择日期,小于7天的不进行计算,只计算大于7天的时候...
·
需求要求日期只能选择7天,无明确需求,然后用了两种方式实现
1.直接限制日期上只有7天可以选择,在根据选择的结束时间来,更新可以选择的日期,这样虽然实现了需求,但是用户体验不好
//只能选择结束日期的7天
beforePickerOptions: {
disabledDate: time => {
if (this.end) {
let preSevenDay =
new Date(this.end).getTime() - 3600 * 24 * 7 * 1000;
return (
time.getTime() < preSevenDay ||
time.getTime() > new Date(this.end) - 3600 * 1000
);
} else {
return time.getTime() > new Date(this.end) - 3600 * 1000;
}
}
},
billPickerOptions: {
disabledDate: time => {
if (this.start) {
let preSevenDay =
new Date(this.start).getTime() + 3600 * 24 * 6 * 1000;
return (
time.getTime() > preSevenDay ||
time.getTime() < new Date(this.start) - 3600 * 1000 * 24
);
} else {
return time.getTime() > new Date() - 3600 * 1000;
}
}
}
2.第二种推荐用户可以自由选择日期,小于7天的不进行计算,只计算大于7天的时候
<el-date-picker
size="small"
v-model="start"
type="date"
placeholder="年/月/日"
value-format="yyyy-MM-dd"
:clearable="false"
@change="
val => {
echartChange(val, 1);
}
"
:picker-options="beforePickerOptions"
>
<i slot="prefix" class="el-input__icon el-icon-date"></i>
</el-date-picker>
beforePickerOptions: {
disabledDate: time => {
return time.getTime() > new Date(this.end) - 3600 * 1000;
}
},
//结束日期需要绑订的
billPickerOptions: {
disabledDate: time => {
return time.getTime() > new Date() - 3600 * 1000;
}
}
//下面是方法处理
echartChange(val, num) {
//开始日期
if (num == 1) {
//如果选择的日期大于结束日期加7,就重新计算结束日期
if (
new Date(this.start).getTime() <
new Date(this.end).getTime() - 3600 * 24 * 6 * 1000
) {
let preSevenDay =
new Date(this.start).getTime() + 3600 * 24 * 6 * 1000;
this.end = this.$CommonFunction.timeFormat(preSevenDay, "yyyy-mm-dd");
}
}else {
//结束日
if (new Date(this.end).getTime() < new Date(this.start).getTime()) {
this.start = "";
let afterSevenDay =
new Date(this.end).getTime() - 3600 * 24 * 6 * 1000;
this.start = this.$CommonFunction.timeFormat(
afterSevenDay,
"yyyy-mm-dd"
);
} else if (
new Date(this.end).getTime() >
new Date(this.start).getTime() + 3600 * 24 * 6 * 1000
) {
let afterSevenDay =
new Date(this.end).getTime() - 3600 * 24 * 6 * 1000;
this.start = this.$CommonFunction.timeFormat(
afterSevenDay,
"yyyy-mm-dd"
);
}
}
},
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐



所有评论(0)