Date Formatting in SwiftUI’s Text View

DevTechie Inc
May 11, 2023

SwiftUI’s Text view provides many formatting options and in this article, we will explore Text view’s date formatting options.

Let’s start with an example. We will create a simple View with Text view inside. We will use Text view’s init overload which takes style as a parameter. Style is the style to apply to the date, possible options are time, date, relative, offset and timer.

Let’s start with date.

Date style: displays only the date part of the Date.

struct DevTechieTextDateFormattingExample: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("DevTechie.com")
                    .font(.largeTitle)
                Text(Date(), style: .date)
            }
            .navigationTitle("DevTechie")
        }
    }
}

Time style: displays only the time part of the Date.

Text(Date(), style: .time)

Relative style: displays the date relative to now and it updates automatically.

Text(Date(), style: .relative)

Offset style: displays the date as offset from now and it updates automatically

Text(Date(), style: .offset)

Timer style: displays the date as a timer from now and it updates automatically.

Text(Date(), style: .timer)

Apart from this, starting iOS 15, we can even use formatted modifier on date to format them further.

struct DevTechieTextDateFormattingExample: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("DevTechie.com")
                    .font(.largeTitle)
                Text(Date().formatted())
            }
            .navigationTitle("DevTechie")
        }
    }
}

We can set date and time formatting by supplying them as date, timeparameters for formatted modifier.

struct DevTechieTextDateFormattingExample: View {
    var body: some View {
        NavigationView {
            VStack(spacing: 50) {
                Text("DevTechie.com")
                    .font(.largeTitle)
                Text(Date().formatted(date: .abbreviated, time: .shortened))
                Text(Date().formatted(date: .complete, time: .complete))
                Text(Date().formatted(date: .long, time: .standard))
                Text(Date().formatted(date: .numeric, time: .omitted))
                Text(Date().formatted(date: .omitted, time: .standard))
            }
            .navigationTitle("DevTechie")
        }
    }
}

We can use formatted modifier to show specific parts of a date.

For example to show week of year.

Text("Week of the year: " + Date().formatted(.dateTime.week()))

Following will show week of the month:

Text("Week of the month: " + Date().formatted(.dateTime.week(.weekOfMonth)))

We can show weekday

Text("Weekday: " + Date().formatted(.dateTime.weekday()))

Other formatting options in weekday are:

struct DevTechieTextDateFormattingExample: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("DevTechie.com")
                    .font(.largeTitle)
                Text("Weekday: " + Date().formatted(.dateTime.weekday(.wide)))
                Text("Weekday: " + Date().formatted(.dateTime.weekday(.twoDigits)))
                Text("Weekday: " + Date().formatted(.dateTime.weekday(.abbreviated)))
                Text("Weekday: " + Date().formatted(.dateTime.weekday(.narrow)))
                Text("Weekday: " + Date().formatted(.dateTime.weekday(.oneDigit)))
                Text("Weekday: " + Date().formatted(.dateTime.weekday(.short)))
            }
            .navigationTitle("DevTechie")
        }
    }
}

Similarly, we can get information about time as well.

struct DevTechieTextDateFormattingExample: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("DevTechie.com")
                    .font(.largeTitle)
                Text("Hour: " + Date().formatted(.dateTime.hour()))
                Text("Minute: " + Date().formatted(.dateTime.minute()))
                Text("Seconds: " + Date().formatted(.dateTime.second()))
                
            }
            .navigationTitle("DevTechie")
        }
    }
}

In order to get TimeZone information from Date we can use formattedmodifier’s timeZone property.

Text("TimeZone: " + Date().formatted(.dateTime.timeZone()))

Formatter modifier takes Locale into consideration as well and we can override that by passing locale as a parameter.

struct DevTechieTextDateFormattingExample: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("DevTechie.com")
                    .font(.largeTitle)
                Text("Month (Italian): --> " + Date().formatted(.dateTime.month(.wide).locale(Locale(identifier: "it"))))
                Text("Month (Hindi): --> " + Date().formatted(.dateTime.month(.wide).locale(Locale(identifier: "hi"))))
                Text("Month (Spanish): --> " + Date().formatted(.dateTime.month(.wide).locale(Locale(identifier: "es"))))
                Text("Month: (French): --> " + Date().formatted(.dateTime.month(.wide).locale(Locale(identifier: "fr"))))
                Text("Month: (Japanese): --> " + Date().formatted(.dateTime.month(.wide).locale(Locale(identifier: "ja"))))
            }
            .navigationTitle("DevTechie")
        }
    }
}

Like