[SwiftUI]UserDefaultsとDatePickerを使用して残り日数をカウントする方法

はじめに

今回作成したもの

今回はDatePickerを使って目的の日付を選択すると、今日から目的日までの日数を計算して表示してくれるものを作りました。
ファイルは一番下にGitのリンクを貼っておきますので良ければご活用ください！

環境

・ /macOS Big Sur 11.3
・ SwiftUI : 2.0
・ Xcode : 12.0

作り方

UswrDefaultについては下記の記事を見て頂くと理解しやすいと思いますので掲載しておきます。

作り方

まずはUserDefaultsの準備をします。

import SwiftUI
class DateLog: ObservableObject {

    @Published var endDate: Date {
        didSet {
            UserDefaults.standard.set(endDate, forKey: "endDate")
        }
    }

    init() {
        endDate = UserDefaults.standard.object(forKey: "endDate") as? Date ?? Date()
    }
}

続いてContentView

実装

import SwiftUI

struct ContentView: View {
    @EnvironmentObject var dateLog: DateLog
    //残り日数の処理
    var dateFormatter: DateFormatter {
        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat = "yyyy.MM.dd"
        return dateFormatter
    }
    var body: some View {
        ZStack{
            let firstDateReset = resetTime(date: dateLog.endDate)
            let secondDateReset: Date = resetTime(date: Date())
            Text("試験日まで残り\(Int(firstDateReset.timeIntervalSince(secondDateReset)/86400))日")

        DatePicker("試験日⇨",
                   selection: $dateLog.endDate,
                   in: Date()...,
                   displayedComponents: [.date])
            .foregroundColor(.clear)
            .opacity(0.1)
            .background(Color.clear)
            .opacity(0.1)
            .font(.title3)
        }.frame(width: 250, height: 60, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environmentObject(DateLog())
    }
}


//残り日数計算function
func resetTime(date: Date) -> Date {
    let calendar: Calendar = Calendar(identifier: .gregorian)
    var components = calendar.dateComponents([.year, .month, .day, .hour, .minute, .second], from: date)

    components.hour = 0
    components.minute = 0
    components.second = 0

    return calendar.date(from: components)!
}

以上で出来上がりです。

Tips

以外とどこにも無かった事で工夫した点はDatePicker表示を消して、残り日数だけを表示させた点です。
普通にDatePickerを使用するとUIが以下のように確定してしまいます。（イメージ図）

これだと自由度がなく味気ないので今回は残りの日数のみを表示させようと思いDatePickerを消しました！
消し方はDatePickerに対して
.foregroundColor(.clear)
.opacity(0.1)
.background(Color.clear)
.opacity(0.1)
を追加するだけです。SwiftUIではほとんどこの”Clear”と”Opacity”のコンボで消せます。
是非オリジナリティなUIを設計する際は使用してみてください！

まとめ

今回作成したファイル