How To Change CMS Dates to Arabic in Webflow

Community resources Webflow Tips
1

ARABIC CMS DATES
ARABIC CMS DATES1920×1080 111 KB

Here’s how to change the dates on CMS to Arabic on Webflow. Super useful if your site is in Arabic!

If you prefer to duplicate your site for different languages, then use this solution

Here’s how it’s done,

  1. Make sure your date is written in this order (month, day, year)

  2. Paste the below script on Project settings > Footer Code

  3. Go to the date text and give it a combo class of arabic-date

  4. Hit publish and that’s it!

<script>
      function convertDateToArabic(className) {
        // Get all elements with the specified class name
        const elements = document.getElementsByClassName(className);
        
        // Loop through the elements and convert the date format
        for (let i = 0; i < elements.length; i++) {
          const dateStr = elements[i].textContent;
          const dateParts = dateStr.split(" ");
          const month = dateParts[0];
          const day = dateParts[1].replace(",", "");
          const year = dateParts[2];
          
          // Convert the month name to Arabic
          const monthArabic = convertMonthToArabic(month);
          
          // Convert the day and year to Arabic numerals
          const dayArabic = convertNumberToArabic(day);
          const yearArabic = convertNumberToArabic(year);
          
          // Update the element's text content with the Arabic date format
          elements[i].textContent = `${dayArabic} ${monthArabic}, ${yearArabic}`;
        }
      }
      
      function convertMonthToArabic(monthName) {
        // Define the month names in Arabic
        const monthNames = {
          "Jan": "يناير",
          "Feb": "فبراير",
          "Mar": "مارس",
          "Apr": "أبريل",
          "May": "مايو",
          "Jun": "يونيو",
          "Jul": "يوليو",
          "Aug": "أغسطس",
          "Sep": "سبتمبر",
          "Oct": "أكتوبر",
          "Nov": "نوفمبر",
          "Dec": "ديسمبر"
        };
        
        // Return the Arabic month name for the given English month name
        return monthNames[monthName];
      }
      
      function convertNumberToArabic(number) {
        // Define the Arabic numerals
        const numerals = ["٠", "١", "٢", "٣", "٤", "٥", "٦", "٧", "٨", "٩"];
        
        // Convert each digit of the number to Arabic numeral and join them
        const arabicNumber = number
          .split("")
          .map(digit => numerals[digit])
          .join("");
          
        // Return the Arabic numeral string
        return arabicNumber;
      }
    </script>
    
        <script>
      convertDateToArabic("arabic-date");
    </script>```
2