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

实现效果如下图

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

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

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

2. 修改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用于格式化Date
const min = '2024-02-21',
    max = '2024-02-24';
const disabledDay = ref(["2024-02-22"]);
const formatter = (day) => {
    let date = day.date,
        now = new Date();
    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));
    }
    return day;
};

完整实现过程如上，有问题可留言或私信