SwiftUI中如何限制结束时间DatePicker不早于开始时间

有几种简单直接的方法可以解决这个问题，具体如下：

方案1：用onChange监听时间变化自动修正 #

通过监听开始/结束时间的变化，一旦检测到结束时间早于开始时间，自动将结束时间同步为开始时间，避免出现无效值。

修改后的代码：

@State private var workoutName: String = ""
@State private var workoutStartTime: Date = Date.now
@State private var workoutEndTime: Date = Date.now
    
@State private var showExercieSheet = false
    
var body: some View {
    VStack {
        List {
            Section(header: Text("Workout Details")) {
                TextField("Enter workout name",text: $workoutName)
                DatePicker("Start Time", selection: $workoutStartTime)
                    // 开始时间变更时，确保结束时间不早于新的开始时间
                    .onChange(of: workoutStartTime) { newStartTime in
                        if workoutEndTime < newStartTime {
                            workoutEndTime = newStartTime
                        }
                    }
                DatePicker("End Time", selection: $workoutEndTime)
                    // 结束时间变更时，若早于开始时间则自动修正
                    .onChange(of: workoutEndTime) { newEndTime in
                        if newEndTime < workoutStartTime {
                            workoutEndTime = workoutStartTime
                        }
                    }
            }
        }
    }
}

方案2：使用自定义绑定（更优雅的内聚逻辑） #

给结束时间的DatePicker自定义绑定逻辑，在设置值时直接判断合法性，无需额外监听代码，逻辑更紧凑。

代码示例：

@State private var workoutName: String = ""
@State private var workoutStartTime: Date = Date.now
@State private var workoutEndTime: Date = Date.now
    
@State private var showExercieSheet = false
    
var body: some View {
    VStack {
        List {
            Section(header: Text("Workout Details")) {
                TextField("Enter workout name",text: $workoutName)
                DatePicker("Start Time", selection: $workoutStartTime)
                    // 开始时间变更时同步修正结束时间
                    .onChange(of: workoutStartTime) { newStartTime in
                        workoutEndTime = max(workoutEndTime, newStartTime)
                    }
                // 自定义结束时间的绑定逻辑
                DatePicker("End Time", selection: Binding(
                    get: { workoutEndTime },
                    set: { newEndTime in
                        workoutEndTime = max(newEndTime, workoutStartTime)
                    }
                ))
            }
        }
    }
}

方案3：限制可选范围+用户提示（最友好的交互） #

直接限制结束时间的可选范围不早于开始时间，用户无法选择无效时间，同时添加文本提示明确规则。

代码示例：

@State private var workoutName: String = ""
@State private var workoutStartTime: Date = Date.now
@State private var workoutEndTime: Date = Date.now
    
@State private var showExercieSheet = false
    
var body: some View {
    VStack {
        List {
            Section(header: Text("Workout Details")) {
                TextField("Enter workout name",text: $workoutName)
                DatePicker("Start Time", selection: $workoutStartTime)
                // 直接限制结束时间可选范围为开始时间之后
                DatePicker("End Time", selection: $workoutEndTime, in: workoutStartTime...)
            }
        }
        // 可选：添加文本提示强化规则
        Text("结束时间不能早于开始时间")
            .foregroundColor(.secondary)
            .font(.caption)
            .padding(.top, 8)
    }
}

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