【SwiftUI】現在日時の取得

SwiftUIを使用して、現在日時を取得して表示するシンプルなアプリを作成しましょう。この例では、Textビューを使用して現在の日時を表示します。

動作環境
Textを使用した日付、時間の表示
Pickerを用いて日時を編集可能にする
ホイール形式に変更

動作環境

Xcode	Version 13.4
Swift	version 5.6.1

Textを使用した日付、時間の表示

iOS14以降であればTextでスタイルを指定することで日付と時間を簡単に表示することができます。

import SwiftUI

struct DateSample: View {
    var body: some View {
        VStack {
            // styleを指定することで簡単に日付を表示できる
            Text(Date(), style: .date)
            Text(Date(), style: .time)
        }
    }
}

struct DateSample_Previews: PreviewProvider {
    static var previews: some View {
        DateSample()
    }
}

Pickerを用いて日時を編集可能にする


import SwiftUI

struct DateSample: View {
    // Date()で現在の日時を取得
    @State private var dateTime = Date()
    var body: some View {
        DatePicker(
            "日時",   // ラベルを表示
            selection: $dateTime // 日時を格納している変数
        )
    }
}

struct DateSample_Previews: PreviewProvider {
    static var previews: some View {
        DateSample()
    }
}

以下のコード例のように表示スタイルを色々変更することもできます。

日付のみ表示

import SwiftUI

struct DateSample: View {
    // Date()で現在の日時を取得
    @State private var dateTime = Date()
    var body: some View {
        DatePicker(
            "日時",   // ラベルを表示
            selection: $dateTime, // 日時を格納している変数
            displayedComponents: [.date] //　日付のみを指定
        )
    }
}

struct DateSample_Previews: PreviewProvider {
    static var previews: some View {
        DateSample()
    }
}

時間、分のみ表示

import SwiftUI

struct DateSample: View {
    // Date()で現在の日時を取得
    @State private var dateTime = Date()
    var body: some View {
        DatePicker(
            "日時",   // ラベルを表示
            selection: $dateTime, // 日時を格納している変数
            displayedComponents: [.hourAndMinute] //　時分のみを指定
        )
    }
}

struct DateSample_Previews: PreviewProvider {
    static var previews: some View {
        DateSample()
    }
}

指定可能な時刻の範囲を設定

import SwiftUI

struct DateSample: View {
    // Date()で現在の日時を取得
    @State private var dateTime = Date()
    
    // 日付の範囲を定義
    // ClosedRange<Date>型（日付の範囲型）
    let dateRange: ClosedRange<Date> = {
        let calendar = Calendar.current
        let startDate = DateComponents(year: 2022, month: 1, day: 1) // 範囲の開始
        let endDate = DateComponents(year: 2023, month: 12, day: 31) // 範囲の終了
        return calendar.date(from: startDate)!
            ...
            calendar.date(from: endDate)!
    }()
    
    var body: some View {
        DatePicker(
            "日時",   // ラベルを表示
            selection: $dateTime, // 日時を格納している変数
            in: dateRange // 選択可能な範囲を指定
        )
    }
}

struct DateSample_Previews: PreviewProvider {
    static var previews: some View {
        DateSample()
    }
}

日付をカレンダーのように表示

import SwiftUI

struct DateSample: View {
    // Date()で現在の日時を取得
    @State private var dateTime = Date()
    
    // 日付の範囲を定義
    var body: some View {
        DatePicker(
            "日時",   // ラベルを表示
            selection: $dateTime // 日時を格納している変数
        )
        .datePickerStyle(.graphical) // スタイルを指定
    }
}

struct DateSample_Previews: PreviewProvider {
    static var previews: some View {
        DateSample()
    }
}

ホイール形式に変更

import SwiftUI

struct DateSample: View {
    // Date()で現在の日時を取得
    @State private var dateTime = Date()
    
    // 日付の範囲を定義
    var body: some View {
        DatePicker(
            "日時",   // ラベルを表示
            selection: $dateTime // 日時を格納している変数
        )
        .datePickerStyle(.wheel) // スタイルを指定
    }
}

struct DateSample_Previews: PreviewProvider {
    static var previews: some View {
        DateSample()
    }
}