SwiftUI中MultiDatePicker整周选择功能实现问题求助

我正在开发一个SwiftUI项目，需要用MultiDatePicker实现以下功能：

• 用户点击某一周内任意日期，自动选中该整周
• 选择另一周日期时，取消原选中周并选中新周

当前实现代码 #

import SwiftUI

struct ContentView: View {
    @State private var dates: Set<DateComponents> = []

    var body: some View {
        MultiDatePicker("", selection: $dates)
            .frame(height: 300)
            .onChange(of: dates) { oldValue, newValue in
                if let selectedDate = newValue.first, let date = Calendar.current.date(from: selectedDate) {
                    selectWeek(for: date)
                }
            }
    }

    private func selectWeek(for date: Date) {
        let calendar = Calendar.current
        let weekBoundary = calendar.weekBoundary(for: date) // 自定义函数，计算整周的起止日期
        for dayOffset in 0..<7 {
            if let dateOfDay = calendar.date(byAdding: .day, value: dayOffset, to: weekBoundary.startOfWeek) {
                let components = calendar.dateComponents([.year, .month, .day], from: dateOfDay)
                dates.insert(components)
            }
        }
    }
}

问题 #

该选择功能仅首次点击时生效，后续点击其他日期无法切换选中的周。

解决方案 #

修正后的实现代码 #

首先补全自定义的weekBoundary扩展，同时修复onChange的循环触发问题，确保切换周时清空旧选中：

import SwiftUI

extension Calendar {
    func weekBoundary(for date: Date) -> (startOfWeek: Date, endOfWeek: Date) {
        let components = dateComponents([.yearForWeekOfYear, .weekOfYear], from: date)
        guard let startOfWeek = date(from: components) else {
            fatalError("无法获取周起始日期")
        }
        let endOfWeek = date(byAdding: .day, value: 6, to: startOfWeek)!
        return (startOfWeek, endOfWeek)
    }
}

struct ContentView: View {
    @State private var dates: Set<DateComponents> = []
    @State private var isUpdatingSelection = false // 防止循环触发的标志位

    var body: some View {
        MultiDatePicker("", selection: $dates)
            .frame(height: 300)
            .onChange(of: dates) { oldValue, newValue in
                guard !isUpdatingSelection else { return }
                
                // 仅处理用户手动点击单个日期的操作（新增一个选中项）
                let newDates = newValue.subtracting(oldValue)
                if newDates.count == 1, let selectedDate = newDates.first, let date = Calendar.current.date(from: selectedDate) {
                    isUpdatingSelection = true
                    selectWeek(for: date)
                    isUpdatingSelection = false
                }
            }
    }

    private func selectWeek(for date: Date) {
        let calendar = Calendar.current
        let weekBoundary = calendar.weekBoundary(for: date)
        
        dates.removeAll() // 清空旧选中，确保切换周时原周被取消
        for dayOffset in 0..<7 {
            if let dateOfDay = calendar.date(byAdding: .day, value: dayOffset, to: weekBoundary.startOfWeek) {
                let components = calendar.dateComponents([.year, .month, .day], from: dateOfDay)
                dates.insert(components)
            }
        }
    }
}

关键修复点 #

1. 防止循环触发：添加isUpdatingSelection标志位，避免代码修改dates时重复触发onChange，造成无限循环
2. 精准判断用户操作：通过计算新旧选中集合的差异，只处理用户手动新增单个日期的情况，忽略代码批量修改的结果
3. 清空旧选中：在selectWeek开头调用dates.removeAll()，确保切换周时原选中的周被完全取消

替代方案 #

如果MultiDatePicker的内置限制较多，也可以选择自定义日历组件：

• 使用第三方库（如SwiftUI-Calendar），这类库通常提供更灵活的选择逻辑配置
• 自己用LazyVGrid实现日历网格，完全控制每个日期单元格的点击事件、选中状态，适配更复杂的业务需求

内容的提问来源于stack exchange，提问作者Ronnie Pickering