SwiftUI - DatePicker

SwiftUI는 기본적으로 DatePicker라는 API를 제공해줘서 달력을 쉽게 사용할 수 있습니다.
https://developer.apple.com/documentation/swiftui/datepicker

DatePicker

DatePicker의 사용법은 간단합니다.

DatePicker 생성자에 이름, 선택 할 date 프로퍼티, 어떤 정보들을 표시할것인지 작성해주면 됩니다.

struct ContentView: View {
  @State var date = Date()
  
  var body: some View {
    DatePicker(
      "DatePicker",
      selection: $date,
      displayedComponents: [.date]
    )
  }
}

위 코드에서는 displayedComponents의 값으로 .date만 줬기 때문에 날짜인 Dec 30, 2024만 출력되며, 해당 날짜를 선택하면 이미지와 같이 달력뷰가 열립니다.

시간도 보이게 하고 싶으면 해당 옵션값에 .hourAndMinute를 추가해주면 다음과 같이 시간까지 출력이 되고 시간을 누르면 시간을 설정할 수 있는 뷰가 열립니다.

in

추가로 DatePicker 생성자에는 다음 이미지와 같이 in이라는 옵션이 있는데 이를 지정해서 선택할 수 있는 날짜 범위를 조절할 수 있습니다.

var dateRange: ClosedRange<Date> {
    let min = Calendar.current.date(
      byAdding: .month,
      value: -2, 
      to: date
    )!
    let max = Calendar.current.date(
      byAdding: .month,
      value: 2,
      to: date
    )!
    return min...max
  }
  
DatePicker(
	"DatePicker",
    selection: $date,
    in: dateRange,
    displayedComponents: [.date, .hourAndMinute]
)

byAdding 옵션은 추가할 값의 단위를 지정하는데 이번에는.month(월)로 지정 오늘을 기점으로 앞으로 2달, 뒤로 2달만 선택할 수 있게끔 해보겠습니다.

.datePickerStyle()

마지막으로 DatePicker의 메서드인 .datePickerStyle()을 사용해서 달력의 스타일도 지정할 수 있습니다.

DatePicker(
	"DatePicker",
    selection: $date,
    in: dateRange,
    displayedComponents: [.date, .hourAndMinute]
)
.datePickerStyle(.wheel)