MultiDatePickerの使い方

SwiftUIにおいて、日付の範囲を選択するコンポーネントとしてMultiDatePickerが使用できます。このコンポーネントを使用することで、ユーザーは複数の日付を選択し、日付の範囲を指定できるようになります。この記事では、MultiDatePickerの基本的な使い方について解説します。

MultiDatePickerの作成
まとめ

MultiDatePickerの作成

まず、MultiDatePickerを作成する方法から始めましょう。以下は、基本的なMultiDatePickerの作成手順です。

struct MultiDatePickerExample: View {
    @State private var selectedDates: Set<DateComponents> = []
    
    //　扱いやすいようにSet<DateComponents>をDate型に変換
    var dates: [Date] {
        let calendar = Calendar.current
        var dateArray: [Date] = []
        for dateComponents in selectedDates {
            if let date = calendar.date(from: dateComponents) {
                dateArray.append(date)
            }
        }
        return dateArray
    }
    
    var body: some View {
        MultiDatePicker("Dates Available", selection: $selectedDates)
        ForEach(dates, id: \.self) { date in
            Text("\(date)")
        }
    }
}

このコードでは、MultiDatePickerを含む基本的なViewを作成しています。selectedDatesという配列を使用して、選択した日付を保持し、ForEachを使用して選択した日付を表示しています。

また、日付を表示する際に扱いやすいようにSet<DateComponents>からDate型に変換しています。