SwiftUI实现支持今日/明日切换的DatePicker技术求助

需求问题 #

• 如何设置今日的日期范围：从当前时间到当日结束
• 如何设置明日的日期范围：从次日0点开始到次日结束
• 如何让DatePicker响应日期范围的切换
• 根据不同的日期范围，绑定对应的日期到DatePicker的selection参数

现有代码 #

VStack { 
    HStack {
        Spacer()
        Button("Today") {
            //switch to today range
        }
        Spacer()
        Button("Tomorrow") {
            //switch to tommorow range
        }
        Spacer()
    }
    
    DatePicker("Delivery Time", selection: $date, in: tommorowRange, displayedComponents: .hourAndMinute)
        .labelsHidden()
        .datePickerStyle(.wheel)
        .frame(width: 200, height: 150)
        .clipped()
        .padding()
}

当前错误的日期范围计算逻辑 #

var todayRange: ClosedRange<Date> {
    let calendar = Calendar.current
    var endComponents = DateComponents()
    endComponents.day = 1

    let endDate = calendar.date(byAdding: endComponents, to: Date.now)!
    return Date.now ... endDate
}

var tommorowRange: ClosedRange<Date> {
    let calendar = Calendar.current
    var startComponents = DateComponents()
    startComponents.day = 2
    var endComponents = DateComponents()
    endComponents.day = 1

    let startDate = calendar.date(byAdding: startComponents, to: Date.now)!
    let endDate = calendar.date(byAdding: endComponents, to: startDate)!
    return startDate ... endDate
}

修正后的完整实现 #

通过状态变量管理选中的范围类型，同时修正日期范围的精准计算逻辑：

import SwiftUI

struct DatePickerView: View {
    // 标记当前选中的日期范围类型
    enum DateRangeType {
        case today, tomorrow
    }
    
    @State private var selectedRangeType: DateRangeType = .today
    @State private var selectedDate: Date = Date.now
    
    // 动态返回当前选中的日期范围
    private var currentDateRange: ClosedRange<Date> {
        switch selectedRangeType {
        case .today:
            return todayRange
        case .tomorrow:
            return tomorrowRange
        }
    }
    
    // 今日范围：当前时间到当日23:59:59
    private var todayRange: ClosedRange<Date> {
        let calendar = Calendar.current
        // 精准设置当日结束时间
        let endOfToday = calendar.date(bySettingHour: 23, minute: 59, second: 59, of: Date.now)!
        // 确保起始时间不早于当前时刻
        let startDate = max(Date.now, calendar.startOfDay(for: Date.now))
        return startDate ... endOfToday
    }
    
    // 明日范围：次日00:00:00到次日23:59:59
    private var tomorrowRange: ClosedRange<Date> {
        let calendar = Calendar.current
        // 获取次日起始时间
        let startOfTomorrow = calendar.date(byAdding: .day, value: 1, to: calendar.startOfDay(for: Date.now))!
        // 精准设置次日结束时间
        let endOfTomorrow = calendar.date(bySettingHour: 23, minute: 59, second: 59, of: startOfTomorrow)!
        return startOfTomorrow ... endOfTomorrow
    }
    
    var body: some View {
        VStack {
            HStack {
                Spacer()
                Button("今日") {
                    selectedRangeType = .today
                    // 切换后确保选中日期在今日范围内
                    if !todayRange.contains(selectedDate) {
                        selectedDate = Date.now
                    }
                }
                .foregroundColor(selectedRangeType == .today ? .blue : .gray)
                Spacer()
                Button("明日") {
                    selectedRangeType = .tomorrow
                    // 切换后确保选中日期在明日范围内
                    if !tomorrowRange.contains(selectedDate) {
                        selectedDate = tomorrowRange.lowerBound
                    }
                }
                .foregroundColor(selectedRangeType == .tomorrow ? .blue : .gray)
                Spacer()
            }
            
            DatePicker("配送时间", selection: $selectedDate, in: currentDateRange, displayedComponents: .hourAndMinute)
                .labelsHidden()
                .datePickerStyle(.wheel)
                .frame(width: 200, height: 150)
                .clipped()
                .padding()
        }
    }
}

#Preview {
    DatePickerView()
}

核心解决要点 #

1. 精准日期范围计算

   • 今日范围：通过Calendar的date(bySettingHour:minute:second:of:)锁定当日结束时间，用max(Date.now, ...)避免选择过去的时间
   • 明日范围：先获取次日的起始时间（当日0点加1天），再锁定次日结束时间

2. 响应范围切换

   • 用@State变量selectedRangeType跟踪选中状态，currentDateRange动态返回对应范围，DatePicker会自动更新可选时间

3. 选中日期适配

   • 切换范围时检查选中日期是否在新范围内，若不在则重置到合理默认值，避免出现无效日期

4. 视觉反馈优化

   • 给选中状态的按钮设置蓝色高亮，让用户清晰感知当前选中的日期范围

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