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

📅 发布时间:2026/7/7 16:36:05 👁️ 浏览次数:
uview plus u-calendar日历设置部分日期不可选择disabled
实现效果如下图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:showshow:minDatemin:maxDatemax:rangefalse:formatterformatter:disabledDaydisabledDay/u-calendar//dateTimeStr用于格式化Dateconstmin2024-02-21,max2024-02-24;constdisabledDayref([2024-02-22]);constformatter(day){letdateday.date,nownewDate();if(dateTimeStr(y-m-d,date)dateTimeStr(y-m-d,now)){day.text今天;}if(符合需求){if(符合预约条件){day.bottomInfo可预约;}else{day.bottomInfo已约满;day.typedisabled;}}else{day.bottomInfo不可预约;day.typedisabled;}if(dateTimeStr(y-m-d,date)2024-02-18){day.bottomInfo已选中;day.dottrue;}if(day.typedisabled){disabledDay.value.push(dateTimeStr(y-m-d,date));}returnday;};完整实现过程如上有问题可留言或私信