DatePicker

DatePicker 是一个用户界面控件，允许用户选择日期和时间。它根据上下文以不同的样式呈现，例如滚轮、日历视图或紧凑样式。视图绑定到 Date 实例，并自动处理本地化和日历系统。

创建 DatePicker

基本初始化方法

 1/// 创建一个选择任意日期的选择器
 2init(_ titleKey: LocalizedStringKey, selection: Binding<Date>, displayedComponents: DatePickerComponents = [.hourAndMinute, .date])
 3
 4/// 创建一个选择任意日期的选择器（自定义标签）
 5init(selection: Binding<Date>, displayedComponents: DatePickerComponents = [.hourAndMinute, .date], @ViewBuilder label: () -> Label)
 6
 7/// 创建一个选择指定范围日期的选择器
 8init(_ titleKey: LocalizedStringKey, selection: Binding<Date>, in: ClosedRange<Date>, displayedComponents: DatePickerComponents = [.hourAndMinute, .date])
 9
10/// 创建一个选择指定范围日期的选择器（自定义标签）
11init(selection: Binding<Date>, in: ClosedRange<Date>, displayedComponents: DatePickerComponents = [.hourAndMinute, .date], @ViewBuilder label: () -> Label)

示例：基本日期选择

1struct BasicDatePicker: View {
2    @State private var date = Date()
3    
4    var body: some View {
5        DatePicker("开始日期", selection: $date)
6    }
7}

日期范围限制

您可以限制 DatePicker 的选择范围，允许用户只选择特定日期区间内的日期。

 1struct RangeDatePicker: View {
 2    @State private var date = Date()
 3    
 4    let dateRange: ClosedRange<Date> = {
 5        let calendar = Calendar.current
 6        let startComponents = DateComponents(year: 2024, month: 1, day: 1)
 7        let endComponents = DateComponents(year: 2024, month: 12, day: 31, hour: 23, minute: 59, second: 59)
 8        return calendar.date(from: startComponents)!...
 9            calendar.date(from: endComponents)!
10    }()
11    
12    var body: some View {
13        DatePicker(
14            "选择日期",
15            selection: $date,
16            in: dateRange,
17            displayedComponents: [.date]
18        )
19    }
20}

使用单侧范围

Swift 支持单侧范围，可以更简洁地限制日期：

1// 只允许选择未来日期
2DatePicker("选择日期", selection: $date, in: Date.now...)
3
4// 只允许选择过去日期
5DatePicker("选择日期", selection: $date, in: ...Date.now)

显示组件配置

使用 displayedComponents 参数控制 DatePicker 显示哪些组件：

№	组件	说明
0	`.date`	显示日期（年、月、日）
1	`.hourAndMinute`	显示时间（小时、分钟）
2	默认	显示日期和时间

示例

1// 只显示时间
2DatePicker("选择时间", selection: $date, displayedComponents: .hourAndMinute)
3
4// 只显示日期
5DatePicker("选择日期", selection: $date, displayedComponents: .date)
6
7// 显示日期和时间（默认）
8DatePicker("选择日期和时间", selection: $date)

样式定制

使用 .datePickerStyle(_:) 修饰符自定义 DatePicker 的外观：

№	样式	说明	平台
0	`.automatic`	自动选择样式	所有平台
1	`.compact`	紧凑样式，点击展开选择	iOS, macOS
2	`.graphical`	图形化日历样式	iOS 14+, macOS 11+
3	`.wheel`	滚轮样式	iOS, watchOS

示例

 1// 图形化日历样式
 2DatePicker("选择日期", selection: $date, displayedComponents: .date)
 3    .datePickerStyle(.graphical)
 4
 5// 滚轮样式
 6DatePicker("选择日期", selection: $date)
 7    .datePickerStyle(.wheel)
 8
 9// 隐藏标签
10DatePicker("选择日期", selection: $date)
11    .labelsHidden()

多行标签

如果需要为 DatePicker 添加子标题，可以使用视图构建器创建多个 Text 视图：

1DatePicker(selection: $date) {
2    Text("开始日期")
3        .font(.headline)
4    Text("请选择您的预约时间")
5        .font(.caption)
6}

完整示例

以下示例展示了一个带有日期范围限制、图形化样式的 DatePicker：

 1import SwiftUI
 2
 3struct BookingView: View {
 4    @State private var bookingDate = Date.now
 5    
 6    // 只允许选择从今天开始的未来30天
 7    let availableRange: ClosedRange<Date> = {
 8        let calendar = Calendar.current
 9        let today = Date.now
10        let endDate = calendar.date(byAdding: .day, value: 30, to: today)!
11        return today...endDate
12    }()
13    
14    var body: some View {
15        Form {
16            Section(header: Text("预约信息")) {
17                DatePicker(
18                    "预约日期",
19                    selection: $bookingDate,
20                    in: availableRange,
21                    displayedComponents: [.date, .hourAndMinute]
22                )
23                .datePickerStyle(.graphical)
24            }
25            
26            Section {
27                Text("已选择: \(bookingDate.formatted(date: .long, time: .shortened))")
28                    .foregroundStyle(.secondary)
29            }
30        }
31    }
32}

平台支持

№	平台	最低版本
0	iOS	13.0+
1	iPadOS	13.0+
2	Mac Catalyst	13.0+
3	macOS	10.15+
4	tvOS	13.0+
5	watchOS	6.0+
6	visionOS	1.0+

注意事项

DatePicker 自动处理本地化，根据用户的设备区域设置显示日期格式（美国用户看到 mm/dd/yyyy，西班牙用户看到 dd/mm/yyyy）
不要尝试在选择器内手动强制 dd/mm/yyyy 格式，信任系统的本地化处理
使用 labelsHidden() 可以隐藏标签，但保留 VoiceOver 无障碍支持
当日期范围内的值不同时，某些样式会以混合状态显示选择