SwiftUI组件-DatePicker

本文记录一下SwiftUI组件-DatePicker

import SwiftUI

struct DatePickerBootCamp: View {
    @State var selectedDate: Date = Date()
    var dateFormatter: DateFormatter {
        let formatter = DateFormatter()
        formatter.dateStyle = .short
        formatter.timeStyle = .short
        return formatter
    }
    let startingDate = Calendar.current.date(from: DateComponents(year: 2018)) ?? Date()
    let endDate = Date()
    
    var body: some View {
        NavigationView{
            ZStack{
                List{
                    NavigationLink("compactDatePicker") {
                        compactDatePicker
                    }
                    
                    NavigationLink("graphicalDatePicker") {
                        graphicalDatePicker
                    }
                    
                    NavigationLink("wheelDatePicker") {
                        wheelDatePicker
                    }
                }
                
                customerDatePicker
            }
            
           
            
            .navigationTitle("DatePickerBootCamp")
        }
    }
    
    var compactDatePicker: some View {
        DatePicker("Select a Date", selection: $selectedDate)
            .accentColor(.red)
            .datePickerStyle(
                CompactDatePickerStyle()
            )
            .padding()
    }
    
    var graphicalDatePicker: some View {
        DatePicker("Select a Date", selection: $selectedDate)
            .accentColor(.red)
            .datePickerStyle(
                GraphicalDatePickerStyle()
            )
            .padding()
    }
    
    var wheelDatePicker: some View {
        DatePicker("Select a Date", selection: $selectedDate)
            .accentColor(.red)
            .datePickerStyle(
                WheelDatePickerStyle()
            )
           
    }
    
    var customerDatePicker: some View {
        
        
        VStack {
            Text("select data is :")
            Text(dateFormatter.string(from: selectedDate))
                .font(.title)
        /// 自定义日期，时间的样式
    //        DatePicker("Select a Date", selection: $selectedDate, displayedComponents: [.date, .hourAndMinute])
            DatePicker("Select a Date", selection: $selectedDate, in: startingDate...endDate, displayedComponents: [.date])
                .accentColor(.red)
                .datePickerStyle(
                    CompactDatePickerStyle()
                )
                .padding()
        }
    }
}

#Preview {
    DatePickerBootCamp()
}

效果如下：