iOS SwiftUI如何实现仅允许选择指定非连续日期的日历？

要实现仅让指定非连续日期可点击、初始高亮，其余日期禁用的需求，需要从「拦截非法选择」和「自定义日期样式」两方面入手，以下是具体修改方案：

一、优化 ViewModel 逻辑 #

首先在 ViewModel 中维护允许选择的日期集合，并修正日期范围的计算逻辑（避免原代码中最后一个日期不在可选范围内的问题）：

class DateSelectionVM: ObservableObject{
    
    @Published var activeDate = [
        DateComponents(year: 2024, month: 3, day: 12),
        DateComponents(year: 2024, month: 3, day: 15),
        DateComponents(year: 2024, month: 3, day: 18),
        DateComponents(year: 2024, month: 3, day: 20),
        DateComponents(year: 2024, month: 3, day: 21),
        DateComponents(year: 2024, month: 3, day: 27)
    ]
    
    @Published var selectedDates: Set<DateComponents> = []
    
    // 转成Set用于快速判断日期是否允许选择
    var allowedDates: Set<DateComponents> {
        Set(activeDate)
    }
    
    var bounds: Range<Date> {
        let calendar = Calendar.current
        // 安全转换DateComponents到Date，避免强制解包
        let dates = activeDate.compactMap { calendar.date(from: $0) }
        guard let firstDate = dates.min(), let lastDate = dates.max() else {
            // 空数组时默认返回当前月范围
            let today = Date()
            let startOfMonth = calendar.date(from: calendar.dateComponents([.year, .month], from: today))!
            let endOfMonth = calendar.date(byAdding: .month, value: 1, to: startOfMonth)!
            return startOfMonth..<endOfMonth
        }
        // 修正Range左闭右开特性，确保最后一个允许的日期包含在范围内
        let upperBound = calendar.date(byAdding: .day, value: 1, to: lastDate)!
        return firstDate..<upperBound
    }
    
    init() {
        selectedDates = allowedDates
    }
}

二、修改 View 实现禁用逻辑 #

在 View 中通过自定义日期单元格样式和拦截选择事件，实现禁用非法日期的效果：

struct DateSelectionView: View {
    
    @ObservedObject var dateSelectionVM = DateSelectionVM()
    
    @Environment(\.calendar) var calendar
    
    var body: some View {
        
        VStack {
            Spacer()
            
            VStack{
                VStack(alignment: .leading){
                    HStack{
                        Text("Your Daily Streak")
                            .foregroundColor(.blue)
                            .font(.title2)
                        Spacer()
                        Image(systemName: "flame")
                            .foregroundColor(.blue)
                        Text("120")
                            .font(.title)
                            .bold()
                    }
                    Divider()
                        .padding(EdgeInsets(top: 5, leading: 0, bottom: 5, trailing: 0))
                    Text("Engage daily")
                        .font(.system(size: 13))
                        .padding(EdgeInsets(top: 5, leading: 0, bottom: 5, trailing: 0))
                    
                    MultiDatePicker("Select Dates", selection: $dateSelectionVM.selectedDates, in: dateSelectionVM.bounds)
                        .frame(height: 300)
                        // 自定义日期单元格样式：区分可点击/不可点击状态
                        .cellContent { date in
                            let dateComponents = calendar.dateComponents([.year, .month, .day], from: date)
                            let isAllowed = dateSelectionVM.allowedDates.contains(dateComponents)
                            
                            Text(String(calendar.component(.day, from: date)))
                                .foregroundColor(isAllowed ? .primary : .gray)
                                .opacity(isAllowed ? 1 : 0.5)
                                .allowsHitTesting(isAllowed)
                        }
                        // 拦截非法选择：自动移除不在允许列表中的日期
                        .onChange(of: dateSelectionVM.selectedDates) { newSelection in
                            dateSelectionVM.selectedDates = newSelection.intersection(dateSelectionVM.allowedDates)
                        }
                }
                
                .padding()
            }
            .background(.gray.opacity(0.2))
            .cornerRadius(10)
            
            Spacer()
            
        }
        .padding()
        .background(.purple.opacity(0.2))
        .navigationTitle("Stack")
        
    }
}

核心实现说明 #

1. allowedDates 集合：将指定日期转成 Set，实现O(1)复杂度的快速判断，比数组遍历更高效。
2. 修正日期范围：解决原代码中Range左闭右开导致最后一个允许日期不在可选范围内的问题，确保所有指定日期都在in参数的范围内。
3. 自定义单元格样式：通过.cellContent修饰符，将不可点击的日期灰化半透明，并禁用点击事件（allowsHitTesting(false)），直观区分可交互状态。
4. 拦截选择操作：用.onChange监听选择变化，自动保留仅允许的日期，防止用户通过键盘输入等方式选中非法日期。

内容的提问来源于stack exchange，提问作者Amrit Tiwari