38. [SwiftUI] DatePicker() 데이트피커

이번에는 날짜, 시간을 선택할 수 있는 DatePicker에 대해 알아보자.

iOS 개발이 매력적이 이유중 하나는 기본 컴포넌트의 퀄리티가 너무 좋다는 것이다.

DatePicker를 보면서 이 생각이 확 들었다.

 

순서대로 compact, wheel, graphical 스타일.

 

내가 애용하는 운동 어플도 데이트 피커가 있다.

물론 이것은 커스텀 데이트피커지만.

 

DatePicker에는 다양한 생성자가 있는데, 예시를 통해 살펴보자.

//  Created by Toughie on 2023/04/30.
//

import SwiftUI

struct DatePickerPrac: View {
    
    @State var selectedDate: Date = Date()
    
    //nil coalescing
    let startingDate: Date = Calendar.current.date(from: DateComponents(year: 2021)) ?? Date()
    let endingDate: Date = Calendar.current.date(from: DateComponents(year: 2024)) ?? Date()
    
    //데이트 포메터
    var dateFormatter: DateFormatter {
        let formatter = DateFormatter()
        //full, medium, short 등으로 정보량을 조절 가능함.
        formatter.dateStyle = .medium
        formatter.timeStyle = .short
        return formatter
    }
    
    var body: some View {
        VStack {
            //기본 데이트 피커
            // DatePicker("", selection: $selectedDate)
            
            //날짜, 시간 선택 가능 _ displayedComponents 배열을 통해
//            DatePicker(
//                "select",
//                selection: $selectedDate,
//                displayedComponents: [.date, .hourAndMinute])
            VStack {
                Text("Selected Date is")
                //데이터 포메터를 통해 포메팅
                Text(dateFormatter.string(from: selectedDate))
            }
            .padding(.top, 10)
            
            //날짜를 한정하려면 (시작, 종료)
            DatePicker(
                "select",
                selection: $selectedDate,
                in: startingDate...endingDate,
                displayedComponents: [.date, .hourAndMinute]
            )
            
            .datePickerStyle(.graphical)
            .padding()
            Spacer()
        }
    }
}