Translating Dates

Hey there! In this guide, we'll show you how to format and translate dates to Spanish using Xano's no-code tools. This can be super useful if your clients or users are primarily Spanish-speaking, and you want to provide a localized experience.

Step 1: Format the Timestamp

First things first, we need to format the timestamp stored in Xano's database to a human-readable date format. Let's take a look at how to do that:

1. Go to the "Data Manipulation" section in Xano.
2. Click on "Update Variable" and create a new variable (e.g., "FormattedDate").
3. For the value, use the existing timestamp field (e.g., "created_at") and add a filter.
4. Choose the "Format Timestamp" filter and use the shortcut "R" to get a fully formatted date and time.

Now, your new variable "FormattedDate" will contain the timestamp in a readable format like "Monday, 18th October 2021".

Step 2: Create a Translation Object

To translate the day names, we'll create a JSON object that maps the English day names to their Spanish counterparts:

1. Go back to the "Data Manipulation" section and create a new variable (e.g., "SpanishDays").
2. Click on "Action" and select "Import JSON".
3. Create a JSON object with keys as the English day names (e.g., "Monday") and values as the Spanish day names (e.g., "Lunes").

Your JSON object should look something like this:

Step 3: Extract the Day Name

To make the translation process easier, we'll extract the day name from the formatted date:

1. Create a new variable (e.g., "DayKeyInEnglish").
2. Use the existing timestamp field (e.g., "created_at") as the value.
3. Add a "Format Timestamp" filter and use the shortcut "D" to get the day name in its English format.

Now, the "DayKeyInEnglish" variable will contain the day name (e.g., "Monday") matching the format in your translation object.

Step 4: Translate the Day Name

Finally, we'll use the translation object to replace the English day name with its Spanish counterpart:

1. Create a new variable (e.g., "TranslatedDate").
2. Use the "FormattedDate" variable as the value.
3. Add a "Replace" filter, and for the search text, use the "DayKeyInEnglish" variable.
4. For the replacement text, use a "Get" filter with a dynamic path of the "DayKeyInEnglish" variable, applied to the "SpanishDays" object.

After saving and running this sequence, your "TranslatedDate" variable will now contain the date with the day name translated to Spanish (e.g., "Lunes, 18 de octubre de 2021").

And there you have it! You've successfully translated dates to Spanish using Xano's no-code tools. You can easily adapt this approach to translate to other languages or modify the date format as needed.