見出し画像

SwiftUIでいこう! - DatePicker

参考サイトです。

SwiftUIでは簡単に"DatePicker"が設置できます。

import SwiftUI
struct ContentView: View {
   
   @State private var selectDate = Date()
   
   var body: some View {
       DatePicker("Title",selection:$selectDate)
   }
}
struct ContentView_Previews: PreviewProvider {
   static var previews: some View {
       ContentView()
   }
}

一番シンプルなコードでこんな感じです。

画像1

カレンダー型のピッカーです。

 DatePicker("Title",selection:$selectDate,displayedComponents: .date)
 .datePickerStyle(GraphicalDatePickerStyle())
 .labelsHidden()
   }

画像2

次は

.datePickerStyle(WheelDatePickerStyle())

とすることで、従来のピッカーとなります。

画像3

selection:$selectDate

この部分で選択したデータが変数に入っていきます。こうしてデータをピックアップします。

もう少し使い方を見ていきます。出力する日付です。

"DateFormatter"を使いって整形します。

まず、

 @Environment(\.timeZone) var timeZone
 
   var dateFormat: DateFormatter {
       let dformat = DateFormatter()
       dformat.dateStyle = .medium
       dformat.timeStyle = .medium
       dformat.dateFormat = "yyyy-MM-dd HH:mm"
       dformat.timeZone  = timeZone
       return dformat
   }

日時のフォーマットを整えて、

Text("Original: \(selectDate.description)")
Text("DateFormat: \(selectDate, formatter: dateFormat)")

として出力すると

画像4

のように、下のだんでは指定している形式に整形され表示されています。


カラーピッカーに関しては


この記事が気に入ったらサポートをしてみませんか?