Format dates inside text views in SwiftUI

In this tutorial, I will show how you can format dates inside text views in SwiftUI.

In SwiftUI, we can make our app look more appealing by formatting dates in text views. There are two main scenarios, formatting date ranges and formatting single dates.

Formatting date ranges

When we want to show a range of time (like from now until 10 minutes later), SwiftUI can automatically format based on the our language and region setting.

Example

Text(Date.now...Date.now.addingTimeInterval(600))

In the above program, the Date.now is the current date and time and Date.now.addingTimeInterval(600) is a date 10 minutes into the future.

Output:

Formatting single dates

When we are working with just one date, we can customize its appearance. SwiftUI offers different styles for this:

• .date: Shows only the date, like “January 17, 2024“.
• .time: Displays only the time, for example, “12:49 PM“.
• .relative: Shows how much time has passed from the current date, like “8 min, 14 sec“. This automatically updates.
• .timer: Displays a countdown timer that updates automatically, for example, “8:14“.

Now, have a look at the example below to know how to use these styles.

VStack(spacing: 20) {
    // Display just the date
    Text(Date.now.addingTimeInterval(600), style: .date)

    // Show only the time
    Text(Date.now.addingTimeInterval(600), style: .time)

    // Display the relative time difference from the current moment, updates automatically
    Text(Date.now.addingTimeInterval(600), style: .relative)

    // Create a timer-style display that updates automatically
    Text(Date.now.addingTimeInterval(600), style: .timer)
}

In the above program, I have a VStack to align the Text views vertically, each Text view will show a different style of date and time.

These Text views will update continuously to always show the correct information.

Output:

Customizing date formats

We can also customize the date formats in SwiftUI, which means we can make our dates look exactly the way we want them to look. We can do this by creating a custom format for our dates.

Now, follow the steps below to do that.

Define a Custom Date Formatter

First of all, we need to define how we want to format the date, and we can achieve this by creating a custom date formatter. We will utilize the  DateFormatter for this purpose.

Example

// Creating a DateFormatter for custom date formatting
static let dateFormatter: DateFormatter = {
    // Create a DateFormatter instance
    let formatter = DateFormatter()

    // Set the date format to "MMMM dd, yyyy 'at' hh:mm a"
    formatter.dateFormat = "MMMM dd, yyyy 'at' hh:mm a"

    // Return the configured formatter
    return formatter
}()

In the above code, I have created an instance called  DateFormatter that will format the date in “MMMM dd, yyyy ‘at’ hh:mm a” format.

Use the custom formatter

Now, I will create a Text view and use that custom formatter ( DateFormatter) to show the date and time in our own format. Here we have specified the “MMMM dd, yyyy ‘at’ hh:mm a” format, we can customize that according to our needs.

Example

Text(Date.now.addingTimeInterval(600), formatter: Self.dateFormatter)

In the above code, the formatter: Self.dateFormatter indicates SwiftUI to use our custom formatter (Self.dateFormatter) to format the date.

Here is the complete code below.

import SwiftUI

struct ContentView: View {
    var body: some View {
        // Displaying a Custom Formatted Date
        Text(Date.now.addingTimeInterval(600), formatter: Self.dateFormatter)
    }

    // Creating a DateFormatter
    static let dateFormatter: DateFormatter = {
        let formatter = DateFormatter()
        formatter.dateFormat = "MMMM dd, yyyy 'at' hh:mm a"
        return formatter
    }()
}

Output: