SwiftUI MultiDatePicker日期范围预设及高亮功能实现求助

一、支持范围选择与高亮的第三方库推荐 #

以下几个适配SwiftUI的第三方库可满足你的需求：

• SwiftUI-Calendar：纯SwiftUI实现，支持日期范围选择、自定义范围高亮样式，适配iOS13+，样式定制灵活，能快速集成预设按钮功能。
• DateRangePicker：专注日期范围选择的组件，自带美观UI，内置范围高亮效果，支持快速选择本周、上月等预设范围，无需额外自定义。
• CalendarKit：兼容UIKit与SwiftUI，提供高度可定制的日历视图，支持多选、范围选择及高亮，适合复杂日历场景。

二、预设按钮失效问题修复 #

你的代码存在两个核心问题导致按钮失效：

1. 硬编码固定日期范围，未动态计算预设（如本周）的起止日期；
2. 按钮逻辑中使用Calendar.current，与环境注入的calendar实例不一致，生成的DateComponents无法被MultiDatePicker正确识别。

修复后的代码 #

import SwiftUI

struct CalendarView: View {
    
    @Environment(\.calendar) var calendar
    @Environment(\.timeZone) var timeZone

    var bounds: Range<Date> {
        let start = calendar.date(from: DateComponents(
            timeZone: timeZone, year: 2022, month: 6, day: 1))!
        let end = calendar.date(from: DateComponents(
            timeZone: timeZone, year: 2023, month: 6, day: 30))!
        return start ..< end
    }

    @State var dates: Set<DateComponents> = []

    var body: some View {
        VStack {
            MultiDatePicker("Dates Available", selection: $dates, in: bounds)
            HStack(spacing: 16) {
                Button("本周") {
                    setDateRange(to: .thisWeek)
                }
                Button("上周") {
                    setDateRange(to: .lastWeek)
                }
                Button("本月") {
                    setDateRange(to: .thisMonth)
                }
                Button("上月") {
                    setDateRange(to: .lastMonth)
                }
            }
            .padding()
            Spacer()
        }
    }
    
    // 预设范围类型
    private enum DatePreset {
        case thisWeek, lastWeek, thisMonth, lastMonth
    }
    
    // 统一处理预设范围逻辑
    private func setDateRange(to preset: DatePreset) {
        dates.removeAll()
        let today = Date()
        var startDate: Date
        var endDate: Date
        
        switch preset {
        case .thisWeek:
            // 获取本周第一天（跟随系统日历设置，可能是周日/周一）
            let weekComponents = calendar.dateComponents([.yearForWeekOfYear, .weekOfYear], from: today)
            startDate = calendar.date(from: weekComponents)!
            endDate = calendar.date(byAdding: .day, value: 6, to: startDate)!
        case .lastWeek:
            let lastWeekDate = calendar.date(byAdding: .weekOfYear, value: -1, to: today)!
            let weekComponents = calendar.dateComponents([.yearForWeekOfYear, .weekOfYear], from: lastWeekDate)
            startDate = calendar.date(from: weekComponents)!
            endDate = calendar.date(byAdding: .day, value: 6, to: startDate)!
        case .thisMonth:
            let monthComponents = calendar.dateComponents([.year, .month], from: today)
            startDate = calendar.date(from: monthComponents)!
            // 获取当月最后一天
            let nextMonth = calendar.date(byAdding: .month, value: 1, to: startDate)!
            endDate = calendar.date(byAdding: .day, value: -1, to: nextMonth)!
        case .lastMonth:
            let lastMonthDate = calendar.date(byAdding: .month, value: -1, to: today)!
            let monthComponents = calendar.dateComponents([.year, .month], from: lastMonthDate)
            startDate = calendar.date(from: monthComponents)!
            let nextMonth = calendar.date(byAdding: .month, value: 1, to: startDate)!
            endDate = calendar.date(byAdding: .day, value: -1, to: nextMonth)!
        }
        
        // 遍历添加范围内所有日期组件
        var currentDate = startDate
        while currentDate <= endDate {
            let components = calendar.dateComponents([.year, .month, .day], from: currentDate)
            dates.insert(components)
            currentDate = calendar.date(byAdding: .day, value: 1, to: currentDate)!
        }
    }
}

关键修复点 #

• 统一使用环境注入的calendar实例，确保生成的DateComponents与MultiDatePicker使用的日历完全匹配；
• 动态计算各预设范围的起止日期，替代硬编码的固定值；
• 封装预设逻辑为单独方法，提升代码可维护性；
• 补充了所有需求的预设按钮（本周、上周、本月、上月）。

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