SwiftUI日期和时间控件DatePicker

在 SwiftUI 中，DatePicker 是一个功能强大的控件，用于选择日期和时间。你可以根据需要自定义其外观和功能。

基本用法

在SwiftUI中，通常用法为：

DatePicker("Select a Date", selection: $selectedDate)
    .datePickerStyle(GraphicalDatePickerStyle()) // 日期选择器样式

其中selection绑定的是一个Date类型的变量：

@State private var selectedDate = Date()

而datePickerStyle则可以变更日期选择器的样式。

简单的日期选择器

struct DatePickerExample: View {
    @State private var selectedDate = Date()

    var body: some View {
        VStack {
            DatePicker("Select a Date", selection: $selectedDate)
                .datePickerStyle(GraphicalDatePickerStyle()) // 日期选择器样式
                .padding()

            Text("Selected Date: \(selectedDate, formatter: dateFormatter)")
        }
    }

    private var dateFormatter: DateFormatter {
        let formatter = DateFormatter()
        formatter.dateStyle = .long
        return formatter
    }
}

说明：

@State 变量 selectedDate 绑定到 DatePicker。

DatePicker 提供了多种样式，可以使用 datePickerStyle 修改。

限制日期范围

限制可选择的日期范围

struct LimitedDatePickerExample: View {
    @State private var selectedDate = Date()

    var body: some View {
        DatePicker(
            "Select a Date",
            selection: $selectedDate,
            in: Date()...Calendar.current.date(byAdding: .year, value: 1, to: Date())!
        )
        .datePickerStyle(GraphicalDatePickerStyle())
        .padding()
    }
}

说明：

使用 in: 参数指定日期范围，这里限制为从今天到一年后。

如果选择的时间不在限制的范围内，会自动回滚到限制的范围区间。

仅选择某个时间段

struct TimeRangePickerExample: View {
    @State private var selectedDate = Date()

    var body: some View {
        DatePicker(
            "",
            selection: $selectedDate,
            displayedComponents: .hourAndMinute // 只显示时间部分
        )
        .datePickerStyle(WheelDatePickerStyle())
        .padding()
    }
}

说明：

displayedComponents 可以指定:

1、仅显示时间 .hourAndMinute

2、仅显示日期 .date。

日期格式化

使用 Text 格式化日期

Text("Selected Date: \(selectedDate, style: .date)")
Text("Selected Time: \(selectedDate, style: .time)")

内置格式化选项：

.date：显示完整的日期，例如 “January 1, 2025”。

.time：显示完整的时间，例如 “2:30 PM”。

.offet：显示当前日期与指定日期的时区偏移，例如 “+02:00”。

.relative：以相对时间的方式显示与当前时间的距离，例如 “5 minutes ago” 或 “in 2 days”。

.timer：显示倒计时计时器，例如 “00:05:23”。

示例代码

Text("Selected Date: \(selectedDate, style: .date)")
Text("Selected Time: \(selectedDate, style: .time)")
Text("Offset Sec: \(selectedDate, style: .offset)")
Text("Offset Sec: \(selectedDate, style: .relative)")
Text("Offset Sec: \(selectedDate, style: .timer)")

自定义日期格式

通过DateFormatter设置自定义的日期格式：

let customFormatter: DateFormatter = {
    let formatter = DateFormatter()
    formatter.dateFormat = "yyyy-MM-dd HH:mm"
    return formatter
}()

Text("Formatted Date: \(selectedDate, formatter: customFormatter)")

自定义样式

SwiftUI 提供了多种内置样式：

1、DefaultDatePickerStyle（默认样式）

2、GraphicalDatePickerStyle（图形样式）

3、CompactDatePickerStyle（紧凑样式）

4、WheelDatePickerStyle（滚轮样式）

内置样式代码示例：

DatePicker("Select a Date", selection: $selectedDate)
    .datePickerStyle(WheelDatePickerStyle())

总结

DatePicker 是 SwiftUI 内置的日期和时间选择器，支持多种样式和功能。

可通过绑定的 @State 变量动态更新日期。

配合 displayedComponents、日期范围和格式化选项，可以满足各种需求。

相关文章

Swift UI深入理解DateFormatter：https://fangjunyu.com/2024/10/06/swift-ui%e6%b7%b1%e5%85%a5%e7%90%86%e8%a7%a3dateformatter/