ios – Highlighting dates between start date and end date in DatePicker


I am using DatePicker in SwiftUI to select start and end dates for the functionality I am working on. I want the dates in past to be disabled, but current and future dates will be enabled. As soon as I select a date in “End Date” date picker, I want to highlight the dates between start and end by changing color of the text or highlighting it with a colored circle.

What I want (notice start date, end date and dates in middle highlighted):

enter image description here

What I am seeing with my code:

enter image description here

My code:

import SwiftUI
import Foundation

struct ContentView: View {
    @State private var startDate = Date()
    @State private var endDate = Date()

    var body: some View {
        VStack {
            DatePicker("Start Date", selection: $startDate, in: Date.now..., displayedComponents: [.date])
            DatePicker("End Date", selection: $endDate, in: startDate..., displayedComponents: [.date])
        }
        .padding()
    }


    /// Trying using MultiDatePicker
//    @State private var dates: Set<DateComponents> = []
//    var body: some View {
//        MultiDatePicker("Dates Available", selection: $dates, in: Date.now...).fixedSize()
//    }
}

I even tried using MultiDatePicker, it does highlight the date, but I have to select the dates individually in it. It does not automatically highlight the dates between start and end date.

How do I achieve it or highlight the entire range automatically/programmatically?

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img