1. DatePickerの使い方

DatePickerは、日付や時間などを選択できるピッカーです。出力方法は下記のように記述すると出力でき、画像のようにラベルと現在の日付・時間が表示されます。何も設定しない状態で出力すると、displayedComponents: [.date, .hourAndMinute]を設定したときと同じ状態になるようです。

@State private var date = Date()

var body: some View {
  DatePicker(
    "Date",
    selection: $date
  )
}

現在の日付・時間をクリックするとカレンダーのようなポップアップが出現して、そのポップアップから日付・時間を選択・変更ができます。DatePickerをどの位置に配置してもディスプレイの上下中央にポップアップされる仕組みのようです。

2. 日付のみの表示

日付だけでいいというときは下記のように記述すると日付だけになります。.dateを.hourAndMinuteに変更すれば時間だけ表示することもできます。

DatePicker(
  "Date",
  selection: $date,
  displayedComponents: [.date] //追加
  //displayedComponents: [.hourAndMinute]
)

3. DatePickerのスタイル変更

カレンダーのようなスタイル

DatePicker(
  ...
)
.datePickerStyle(GraphicalDatePickerStyle())

ホイール形式で日時を選択するスタイル

DatePicker(
  ...
)
.datePickerStyle(WheelDatePickerStyle())

4. 日付の選択制限

現在より先の日付（未来の日付）は選択不可

DatePicker(
  "Date",
  selection: $date,
  in: ...Date(),
  displayedComponents: [.date]
)

現在より前の日付（過去の日付）は選択不可

DatePicker(
  "Date",
  selection: $date,
  in: Date()...,
  displayedComponents: [.date]
)

選択できる日付の範囲を指定。下記の場合だと2021年1月1日から2022年12月31日の間を選択可能にしてその範囲以外は選択不可という設定です。

@State private var date = Date()
  
let dateRange: ClosedRange<Date> = {
    let calendar = Calendar.current
    let start = DateComponents(year: 2021, month: 1, day: 1)
    let end = DateComponents(year: 2022, month: 12, day: 31, hour: 23, minute: 59, second: 59)
    return calendar.date(from:start)!
        ...
        calendar.date(from:end)!
}()

var body: some View {
  DatePicker(
    "Date",
    selection: $date,
    in: dateRange,
    displayedComponents: [.date]
  )
}

5. 選択した日時の表示とフォーマット

DatePickerで選択した日時を表示したい場合。日時のフォーマット設定をして、Text(dateFormat.string(from: date))で設定したフォーマットで日時を出力できます。またDatePickerも.environment(\xxx)を追加することで表示が変更できます。

@State private var date = Date()
//vvフォーマット設定
var dateFormat: DateFormatter {
  let format = DateFormatter()
  format.dateStyle = .full // .full | .long | .medium | .short | .none
  format.timeStyle = .full // .full | .long | .medium | .short | .none
  format.locale = Locale(identifier: "ja_JP")
  format.calendar = Calendar(identifier: .japanese)
  format.dateFormat = "yyyy-MM-dd HH:mm"
  return format
}


var body: some View {
  VStack {
    Text(dateFormat.string(from: date))//<<日時出力
    DatePicker(
      "Date",
      selection: $date
    )
    .environment(\.locale, Locale(identifier: "ja_JP"))
    //.environment(\.timeZone, TimeZone(secondsFromGMT: 5*60*60)!)
    //.environment(\.calendar, Calendar(identifier: .japanese))
  }
}

6. DatePickerのカラーを変更

DatePickerのカラーも多少変更可能です。下記の記述は、GraphicalDatePickerStyle()（カレンダーのようなスタイル）を色々いじってみたサンプルです。

VStack {
  DatePicker(
    "Date",
    selection: $date,
    displayedComponents: [.date, .hourAndMinute]
  )
  .datePickerStyle(GraphicalDatePickerStyle())
  .accentColor(.black)
  .background(
    RoundedRectangle(cornerRadius: 10)
      .fill(Color.gray)
      .opacity(0.2)
  )
  .overlay(
    RoundedRectangle(cornerRadius: 10)
      .stroke(Color.black, lineWidth: 10)
      .opacity(0.8)
  )
  .labelsHidden()
  .frame(maxWidth: 300)
  .padding()
}

DatePicker | Apple Developer Documentation
DateFormatter | Apple Developer Documentation