SwiftUI中如何让DatePicker以24小时制（军用时间）显示？

问题背景 #

使用SwiftUI的DatePicker选择时间时，滚轮仅显示12小时制选项，修改设备的24小时制系统设置后无变化，需要强制让滚轮使用24小时制（军用时间）格式。

解决方案 #

通过给DatePicker设置强制启用24小时制的Locale，可以忽略系统设置，直接让滚轮显示24小时制选项。同时调整时间文本的格式化方式，确保显示也符合24小时制要求。

修改后的完整代码 #

import SwiftUI

struct ContentView: View {
    
    @State private var startTime = Date().zeroSeconds
    @State private var endTime = Date().zeroSeconds
 
    private var formatter: DateComponentsFormatter = {
        let df = DateComponentsFormatter()
        df.allowedUnits = [.hour, .minute]
        return df
    }()
    
    // 自定义24小时制Locale
    private let twentyFourHourLocale: Locale = {
        var localeComponents = Locale.Components()
        localeComponents.calendar = Calendar(identifier: .gregorian)
        localeComponents.uses24HourClock = true
        return Locale(components: localeComponents)
    }()

    var amountDue: Double {
        let numberIntervals = duration15 / 900
        if numberIntervals < 4 {
            return 460
        } else {
            var overTime = numberIntervals - 24
            if overTime < 0 {
                overTime = 0
            }
            return 460 + (numberIntervals-4) * 55 + (overTime * 20)
        }
    }
    
    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("Enter Case Times:")) {
                    // 给DatePicker添加强制24小时制的Locale
                    DatePicker("Start Time", selection: $startTime, displayedComponents: .hourAndMinute)
                        .locale(twentyFourHourLocale)
                    DatePicker("End Time", selection: $endTime, in: startTime..., displayedComponents: .hourAndMinute)
                        .locale(twentyFourHourLocale)
                }
                Section(header: Text("Times Selected:")) {
                    // 使用.standard格式确保24小时制显示
                    Text("Start Time = \(startTime.formatted(date: .omitted, time: .standard))")
                    Text("End Time = \(endTime.formatted(date: .omitted, time: .standard))")
                }
                Section(header: Text("Case Duration:")) {
                    Text("duration = \(self.durationStr)")
                    Text("duration (rounded) = \(self.duration15Str)")
                }
                Section(header: Text("Amount Due:")) {
                    Text(amountDue, format: .currency(code: Locale.current.currency?.identifier ?? "USD"))
                }
            }
            .navigationTitle("DDA Rates Calculator")
        }
    }
    
    var duration: TimeInterval {
        guard endTime > startTime else {
            return 0
        }
        return DateInterval(start: startTime, end: endTime).duration
    }
    
    var duration15: TimeInterval {
        return ((self.duration/900.0).rounded(.up)*900)
    }
    
    var durationStr: String {
        let duration = self.duration
        guard duration > 1 else {
            return "----"
        }
        return formatter.string(from: duration) ?? "----"
    }
    
     var duration15Str: String {
        let duration = duration15
        guard duration > 1 else {
            return "----"
        }
        return formatter.string(from: duration) ?? "----"
     }
        
}

extension Date {
    var zeroSeconds: Date {
        let calendar = Calendar.current
        let dateComponents = calendar.dateComponents([.year, .month, .day, .hour, .minute], from: self)
        return calendar.date(from: dateComponents) ?? self
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

关键修改说明 #

1. 自定义24小时制Locale：创建一个Locale实例，明确设置uses24HourClock = true，覆盖系统默认的Locale设置，确保DatePicker滚轮显示24小时制选项。
2. 给DatePicker添加Locale修饰符：通过.locale(twentyFourHourLocale)将自定义Locale应用到两个时间选择器上。
3. 调整时间文本格式化：将原来的time: .shortened改为time: .standard，确保选中的时间以24小时制格式显示，而不是跟随系统设置。

补充说明 #

如果需要适配特定地区的24小时制格式，也可以直接使用对应地区的Locale标识符（比如Locale(identifier: "de_DE")、Locale(identifier: "en_GB")），这些地区默认使用24小时制，但自定义Locale.Components的方式更通用，不受地区限制。

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