SwiftUI实现点击Button唤起DatePicker功能求助

方案1：弹窗式选择器（Popover） #

这种方式会在按钮附近弹出DatePicker，适合快速选择日期：

struct DatePickerDemoView: View {
    @State private var showDatePicker = false
    @State private var selectedDate = Date()
    
    // 动态生成日期文本：当天显示"Today"，其他日期显示格式化字符串
    private var dateText: String {
        let formatter = DateFormatter()
        formatter.dateStyle = .medium
        return Calendar.current.isDateInToday(selectedDate) ? "Today" : formatter.string(from: selectedDate)
    }
    
    var body: some View {
        HStack {
            Image(systemName: "calendar")
            
            Button(action: {
                showDatePicker.toggle()
            }, label: {
                Text(dateText)
                    .font(.system(size: 17, weight: .semibold, design: .rounded))
            })
            // 绑定弹窗显示状态，弹出日期选择器
            .popover(isPresented: $showDatePicker) {
                DatePicker("", selection: $selectedDate, displayedComponents: .date)
                    .datePickerStyle(.graphical)
                    .padding()
                    .presentationDetents([.medium]) // 设置弹窗高度
            }
            
            Spacer()
            Image(systemName: "arrowtriangle.down.fill")
                .font(.system(size: 16, weight: .semibold))
        }
        .padding()
    }
}

关键说明 #

• showDatePicker 控制弹窗的显示/隐藏，点击按钮时切换状态
• dateText 自动判断选中日期是否为当天，动态显示"Today"或格式化日期
• 可修改datePickerStyle切换选择器样式（比如.compact或.wheel）

方案2：全屏弹窗选择器（Sheet） #

如果需要全屏式的日期选择界面，用Sheet实现更合适：

struct DatePickerDemoView: View {
    @State private var showDatePicker = false
    @State private var selectedDate = Date()
    
    private var dateText: String {
        let formatter = DateFormatter()
        formatter.dateStyle = .medium
        return Calendar.current.isDateInToday(selectedDate) ? "Today" : formatter.string(from: selectedDate)
    }
    
    var body: some View {
        HStack {
            Image(systemName: "calendar")
            
            Button(action: {
                showDatePicker.toggle()
            }, label: {
                Text(dateText)
                    .font(.system(size: 17, weight: .semibold, design: .rounded))
            })
            // 绑定Sheet显示状态，弹出全屏选择器
            .sheet(isPresented: $showDatePicker) {
                NavigationStack {
                    DatePicker("Select Date", selection: $selectedDate, displayedComponents: .date)
                        .datePickerStyle(.graphical)
                        .navigationTitle("Choose Date")
                        .navigationBarTitleDisplayMode(.inline)
                        .toolbar {
                            Button("Done") {
                                showDatePicker = false
                            }
                        }
                }
            }
            
            Spacer()
            Image(systemName: "arrowtriangle.down.fill")
                .font(.system(size: 16, weight: .semibold))
        }
        .padding()
    }
}

关键说明 #

• Sheet从底部弹出全屏视图，搭配NavigationStack添加确认按钮，方便用户完成选择后关闭
• 若需要同时选择时间，将displayedComponents改为.dateAndTime即可

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