# Localizing Date & Time in SwiftUI

Today’s post will share a tip to work with localization. When you localize your app with a `Date` (in Swift the type `Date` represents both date and time), you might need to make dates get displayed in different languages.

The source code of this post is available [here](https://github.com/xavier7t/DemoLocalizedDate20230217).

# Step 1 - Create a view to display the date and time

* Create a project with SwiftUI interface
    
* In the ContentView, declare a constant called `now` and assign `Date()` to it. `Date()` initialize a `Date` struct that represents the current time.
    
* In the body property, replace the default VStack with an HStack in a List, which contains two texts to display `now`.
    
* In the text view, we can specify the date display style, such as `.date` to display the date component or `.time` to display the time component.
    

```swift
struct ContentView: View {
    let now = Date()
    var body: some View {
        NavigationStack {
            List {
                HStack {
                    Text(now, style: .date)
                    Spacer()
                    Text(now, style: .time)
                }
            }
            .navigationTitle("Localized Dates")
        }
    }
}
```

Once done, you can see a list item like the one below, with a value of the time you’re seeing the preview.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676686849213/db30a266-7d8d-4003-bb03-484e25f565c1.png align="center")

# Step 2 - Set Environment

To view the data in a different language (or different locale region even if the language is the same), you need an environment modifier to set for the view.

`.environment(\.locale, Locale(identifier: "en"))`

Typically, for localization purposes, this environment modifier should be set to the entire content view. Here I’ll add it after the list just for this demo.

You can change the identifier to different values to see the result. For instance, in the code below, I made the identifier "fr" and now the date in the preview is shown in French.

```swift
List {
    HStack {
        Text(now, style: .date)
        Spacer()
        Text(now, style: .time)
    }
}
.environment(\.locale, Locale(identifier: "fr"))
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676687230106/7dd34bac-cc5b-425d-9f5f-803a277173d1.png align="center")

# Step 3 - See results for a list of Locales

The identifier parameter used to initialize `Locale` supports a string of language code (i.e. "en", "fr") or a string of language and region (i.e. "en-US", "en-GB".)

Say your localization supports for locales and you want to see the value in all of them, you can add an array of locale strings and use `ForEach` to wrap the HStack and make the environment modifier set to the HStack after passing the locale string to the `identifier` parameter of its initializer.

```swift
let locales: [String] = [
    "en_US",
    "es_US",
    "fr_US"
]

struct ContentView: View {
    //......
}
```

```swift
List {
    ForEach(locales, id: \.self) { locale in
        HStack {
            Text(now, style: .date)
            Spacer()
            Text(now, style: .time)
        }
        // move the modifier here
        .environment(\.locale, Locale(identifier: locale)) // remember to update the identifier to locale instead of a hard-coded string value here
    }
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676687807392/14b600dd-5f43-4ed7-bef9-53a3e2021cec.png align="center")

Now you can see that the dates are shown in three different languages. This can be useful when you want to present a preview of a Date element in different languages if they can switch between languages in the app.

*Note: as you might have noticed, all three strings in the array* `locales` *has the same region "US", meaning that the language code and the region code don’t have to match. This makes sense as a user can set up an iPhone with a language that is not commonly used in the region of residence.*  

That’s all of this post. Just a small tip but might be useful for most apps that support localization. Leave a comment and remember to subscribe to my newsletter to get more posts like this!

See you all tomorrow.