当前位置：首页 > news >正文

uview plus u-calendar日历设置部分日期不可选择disabled

news 2026/5/11 15:03:22

实现效果如下图

2024-5-8 更新—注意事项

如图，如果今天不可选中，但是依然是默认选中状态，可以点确定，优化代码如下：

修改u-calendar.vue的代码，搜索updateMonthTop(topArr = [])跳转到指定方法

修改month.vue的代码，搜索setDefaultDate()跳转到指定方法

代码

修改如下图目录的两个文件

首先修改props.js文件，搜索customList，在下方插入disabledDay：

// 自定义列表customList:{type:Array,default:defprops.calendar.customList},/** 插入部分 **///不可选日期disabledDay:{type:Array,default:[]},// 主题色，对底部按钮和选中日期有效color:{type:String,default:defprops.calendar.color},

然后修改u-calendar.vue文件，搜索setMonth() {，修改disabled如下：

disabled:dayjs(date).isBefore(dayjs(minDate).format('YYYY-MM-DD'))||dayjs(date).isAfter(dayjs(maxDate).format('YYYY-MM-DD'))||this.disabledDay.indexOf(dayjs(date).format('YYYY-MM-DD'))!=-1,//这段是新插入部分

使用：

<u-calendar:show="show":minDate="min":maxDate="max":range="false":formatter="formatter":disabledDay="disabledDay"></u-calendar>

//dateTimeStr用于格式化Dateconstmin='2024-02-21',max='2024-02-24';constdisabledDay=ref(["2024-02-22"]);constformatter=(day)=>{letdate=day.date,now=newDate();if(dateTimeStr("y-m-d",date)==dateTimeStr("y-m-d",now)){day.text="今天";}if("符合需求"){if("符合预约条件"){day.bottomInfo="可预约";}else{day.bottomInfo="已约满";day.type="disabled";}}else{day.bottomInfo="不可预约";day.type="disabled";}if(dateTimeStr("y-m-d",date)=='2024-02-18'){day.bottomInfo="已选中";day.dot=true;}if(day.type=="disabled"){disabledDay.value.push(dateTimeStr("y-m-d",date));}returnday;};