uni-app+js uni-datetime-picker扩展组件,禁用某个日期不可选择

发布时间 2023-03-22 21:16:21作者: 小小菜鸟之路

参考链接:

https://blog.csdn.net/qq_40881695/article/details/124894009

1、

props// 禁用日期 disabledDate:type: Function }}

 

 

 

2、

props: { // 禁用日期 disabledDate:{ type: Function }, }

 

 

 3、props// 禁用日期 disabledDate:type: Function }}

 

 

 css:

.uni-calendar-item__weeks-box.uni-calendar-item--disable {
cursor: not-allowed;
pointer-events:none;
}

.uni-calendar-item__weeks-box .uni-calendar-item--disable {
cursor: not-allowed;
pointer-events:none;
}

.uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
color: #D1D1D1;
cursor: not-allowed;
pointer-events:none;
}

4、画面使用

 

 

// 放在data中需要使用bind(this),要不然函数内this使用指向的不是当前变量

data() {

return {

// 禁止开始日期某些日期不能选择
echartDisabledStartDate: function(time) {
if (!time || !this.echartCurveInfoPopup.endDate) {
return false;
}
var start = new Date(time);
var end = new Date(this.echartCurveInfoPopup.endDate);
var timeslong = (getDate(end).getTime() - getDate(start).getTime()) / (1000 * 60 * 60 * 24);

// 开始日期不能大于结束日期,并且只能选择半个月内日期
return start.getTime() > end.getTime() || timeslong > 14;
}.bind(this),
// 禁止结束日期某些日期不能选择
echartDisabledEndDate: function(time) {
if (!time || !this.echartCurveInfoPopup.startDate) {
return false;
}
var start = new Date(this.echartCurveInfoPopup.startDate);
var end = new Date(time);
var timeslong = (getDate(end).getTime() - getDate(start).getTime()) / (1000 * 60 * 60 * 24);

// 开始日期不能大于结束日期,并且只能选择半个月内日期
return end.getTime() <= start.getTime() || timeslong > 15;
}.bind(this),

}

}