Custom Datepicker style in SwiftUI

A DatePicker view is a controller that allows users to select a calendar date and time. It’s similar to the UIDatePicker view and In order to work it needs to bind to a Date instance.

What this blog will cover:

• DatePicker
• DatePicker style
• state properties

Syntax:

@State private var date = Date() 
var body: some View {

 DatePicker( "Date", selection: $date )

}

So first of all we’ll create a Date instance:

@State private var CurrentDate:Date = .now

•    State: By default, Structs are immutable in Swift, We cannot change and modify struct values without using the mutable property. So this same thing can be achieved in SwiftUI by using the state property. State property allows us to change or update the struct values. SwiftUI keeps track of the state variables and recreates the views, that use these variables, whenever any state variable is changed or updated.

Now, We’ll bind this CurrentDate instance to a DatePicker in our ContentView.

struct ContentView: View {
    @State private var CurrentDate:Date = .now
        var body: some View {
            VStack{
                DatePicker("Date:", selection: $CurrentDate)
      }
   }
}

Right now the DatePicker view is displaying the current date and time. Currently, they are in a compact form and can be clicked. After clicking on them the actual calendar and clock will pop up and you can change the date and time from there. It will update all dates that are bound to the CurrentDate variable.

DatePicker View Components

DatePicker("Date:", selection: $CurrentDate)

Right now, The DatePicker view is displaying both date and time. The DatePicker view gives us the option to choose from its components which are time and date. You can display both of them at the same time and you can also choose one at a time. We can achieve this by using the displayedComponents property.

struct ContentView: View {
    @State private var CurrentDate:Date = .now
        var body: some View {

            VStack{

             // display date only                
             DatePicker("Date:", selection: $CurrentDate, displayedComponents: [.date]) 
            
             // displat time only 
             DatePicker("Date:", selection: $CurrentDate, displayedComponents: [.hourAndMinute])
}
}

Remove Label

We can also remove its label. To fully remove this label what we need to do is, We can give an empty string to the DatePicker instance and call the label hidden modifier, this will remove the label and put the date picker in the center of the screen.

So let’s see how we can do this:

struct ContentView: View {
    @State private var CurrentDate:Date = .now
        var body: some View {
          VStack{
               DatePicker("", selection: $CurrentDate, displayedComponents: [.date])
                    .labelsHidden()
        }
}

Customize Date Picker View

We can customize our date picker view by changing its style and color.

Change DatePicker Style

You can change the style of your DatePicker by using the modifier datePickerStyle. There are four different DatePicker styles.

• .automatic: The application itself will pick datePicker’s style based on the system it’s running on
• .compact: Compact style is only available for ios 14 and above.
• .graphical
• .wheel

That’s how we’ll use this modifier

struct ContentView: View {
    @State private var CurrentDate:Date = .now
        var body: some View {

            VStack{
                DatePicker("", selection: $CurrentDate, displayedComponents: [.date])
                    .datePickerStyle(.graphical)
            
        }

    }
}

Change DatePicker Color

Its color can be changed by simply using the background and accentColor modifiers.

struct ContentView: View {
    @State private var CurrentDate:Date = .now
        var body: some View {
       VStack{
                    DatePicker("", selection: $CurrentDate, displayedComponents: [.date])
                    .accentColor(.teal)
                
        }

    }
}

Here’s the complete code for your reference:

import SwiftUI

struct ContentView: View {
    @State private var CurrentDate:Date = .now
        var body: some View {

            VStack{
                
                // will show both date and time
                DatePicker("Date:", selection: $CurrentDate)
                
                // display date only
                DatePicker("Date:", selection: $CurrentDate, displayedComponents: [.date])
                
                // display time only
                DatePicker("Date:", selection: $CurrentDate, displayedComponents: [.hourAndMinute])
                
                
                DatePicker("", selection: $CurrentDate, displayedComponents: [.date])
                    .labelsHidden() // hides the label
                  
                    .datePickerStyle(.graphical) // changes the style
                  
                //  .background(.indigo) // changes the background color
                    
                    .accentColor(.teal) // changes the tint color
            
        }

    }
}

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