如何在SwiftUI中通过点击按钮手动唤起DatePicker日期选择器

以下是两种可直接落地的实现方案：

方案一：透明原生DatePicker覆盖（推荐，无额外弹窗逻辑） #

直接利用原生compact样式DatePicker的点击弹出特性，将其透明覆盖在你自定义的样式视图上方，完全保留系统原生交互逻辑，自定义区域的字体、颜色、字号可任意调整，无需自己处理弹窗逻辑。

实现代码 #

struct ContentView: View {
    @State private var date = Date()
    // 自定义日期格式
    private let dateFormatter: DateFormatter = {
        let formatter = DateFormatter()
        formatter.dateFormat = "yyyy-MM-dd"
        return formatter
    }()

    var body: some View {
        VStack {
            ZStack {
                // 下方自定义展示区域，样式可任意修改
                HStack {
                    Text("开始时间")
                        .font(.system(size: 16))
                        .foregroundColor(.black)
                    Spacer()
                    Text(dateFormatter.string(from: date))
                        .font(.system(size: 16))
                        .foregroundColor(.gray)
                }
                // 透明原生DatePicker盖在最上层，接管所有点击交互
                DatePicker(selection: $date, in: ...Date(), displayedComponents: .date) {
                    EmptyView()
                }
                .datePickerStyle(.compact)
                .opacity(0.01)
            }
            .frame(height: 44)
            .padding(.horizontal, 20)
        }
    }
}

特点 #

• 代码量最小，完全复用系统原生DatePicker的弹出、选择逻辑，无兼容性问题
• 自定义展示区域的样式无任何限制，可实现任意设计需求

方案二：按钮点击弹出Sheet承载DatePicker #

如果需要自定义选择器的样式、添加确认/取消按钮、控制弹窗高度，可通过Sheet弹窗手动承载DatePicker。

实现代码 #

struct ContentView: View {
    @State private var date = Date()
    @State private var showDatePicker = false
    private let dateFormatter: DateFormatter = {
        let formatter = DateFormatter()
        formatter.dateFormat = "yyyy-MM-dd"
        return formatter
    }()

    var body: some View {
        VStack {
            HStack {
                Text("开始时间")
                    .font(.system(size: 16))
                    .foregroundColor(.black)
                Spacer()
                Button(dateFormatter.string(from: date)) {
                    showDatePicker = true
                }
                .font(.system(size: 16))
                .foregroundColor(.gray)
            }
            .frame(height: 44)
            .padding(.horizontal, 20)
        }
        .sheet(isPresented: $showDatePicker) {
            NavigationStack {
                DatePicker("选择日期", selection: $date, in: ...Date(), displayedComponents: .date)
                    .datePickerStyle(.wheel) // 可切换为inline等其他样式
                    .padding()
                    .navigationTitle("选择日期")
                    .navigationBarTitleDisplayMode(.inline)
                    .toolbar {
                        ToolbarItem(placement: .confirmationAction) {
                            Button("确认") {
                                showDatePicker = false
                            }
                        }
                        ToolbarItem(placement: .cancellationAction) {
                            Button("取消") {
                                showDatePicker = false
                            }
                        }
                    }
            }
            .presentationDetents([.medium]) // iOS16+支持自定义弹窗高度
        }
    }
}

特点 #

• 交互逻辑完全可控，可自定义弹窗的所有元素
• 支持切换DatePicker为滚轮、列表等其他展示样式

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