Easily translate your CMS dates in Webflow

Disclaimer

This method is not intended for multi-language websites. Rather, it’s designed for a single-language website (in a language other than English) where you need to translate existing English dates into another language.

‍

Step 1: Include the Required Scripts

Add the following scripts to your head section:

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/nl.js"></script>

‍

Note: In this example, we’re translating English dates to Dutch (nl). If you need a different language, simply include the corresponding locale file and update the locale references in the code below.

‍

Step 2: Add the Translation Code

Place the following script on any page that contains dates needing translation. If you have multiple pages, consider wrapping this in a reusable component to ensure consistency.

‍

// Select all elements with the class 'translate-date' (change as needed)
const dateElements = document.querySelectorAll(".translate-date");

dateElements.forEach(function (el) {
 const originalText = el.innerText.trim();
 const parsedDate = dayjs(originalText, 'MMMM D, YYYY', 'en');
 
 if (parsedDate.isValid()) {
   // Convert the parsed date into the Dutch locale and format
   const dutchDate = parsedDate.locale('nl').format('MMMM YYYY');
   el.innerText = dutchDate;
 }
});


‍

.translate-date is an example class for identifying elements containing dates.

If you prefer, you can use a different class name or multiple classes (e.g., ".translate-date, .some-other-class").

‍

Need Assistance?

If you have any questions or need further help, feel free to reach out to johan@wambay.com.

That’s it! In just a couple of minutes, you can seamlessly translate English dates into Dutch (or another language) using Day.js.

‍

‍