Date format not working or loading on website

I have this code that had worked in the past except in the past month it suddenly stopped working for unknown reason. I've tried to place coding in specific areas, such as <head>, body and main content, where I thought could improve or make it work but none did. Can anyone check on this coding and see if something is missing, or perhaps could make it work again?

If you can check out the website here https://www.gretaliaprince.com/blog/category/style-2020 then scroll down to a single blog post there is a date formatted as 3/7/2020. And the date was suppose to format as 7th March, 2020. Thanks

// Blog date
window.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.date-text').forEach(el => el.textContent = formatDateString(el.textContent))
}, false);
function formatDateString(s) {
  var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var nth = function (d) {
      if (d > 3 && d < 21) return 'th'; switch (d % 10) {
        case 1: return "st";
        case 2: return "nd";
        case 3: return "rd";
        default: return "th";
      }
    }
  var arr = s.split('/');
  return arr[1] + nth(arr[1]) + " " + months[arr[0] - 1] + " " + arr[2];
  }

Solution

I have briefly looked at the site you have shared a link to in your question. There is no problem with the formatDateString function you posted above. However, there are many javascript errors occuring before the page reaches the formatDateString function. Because of this the code you posted will not have been executed.

The first error that occurs is because in this click event listener, the variable being passed in "e" as the event data doesn't appear to have been declared anywhere in the same scope.

$('li.months').click(e,function() {

just for clarity a variable passed in to an event listener as event data as the parameter before a function, is used to pass data from outside of the event handler in to be used within the callback. This is not the same as the "event object" variable passed by the event listener itself to the callback function, that holds the information about the event that was triggered. Which would be written like this

$('li.months').click(function(e){

This error is likely the main contributor of all the errors that follow as it causes jQuery to throw an exception.

Update:

Not sure if I'm missing it, but I had another look and combed through all your JS files and wasn't able to find anywhere in the files loaded in the browser where this code or code that tries to manipulate the date-text exists. Because the function you want to run has no JS dependancies you can add it to the last loaded script tag on your page instead. I have quickly tested adding it to the self invoking function that loads your twitter widget as shown in the example below.

This function runs as the very last item so no need to check for DOMContentLoaded

(function() {
    function j(src, id) {
            var s = document.createElement('script');
            s.type = 'text/javascript';
            s.async = true;
            s.src = src;
            if(id) {s.id=id};
            document.getElementsByTagName('head')[0].appendChild(s);
    }
    j('//platform.twi'+'tter.com/widgets.js');
    
// INSERT CODE STARTING HERE
    function formatDateString(s) {
      var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
      var nth = function (d) {
          if (d > 3 && d < 21) return 'th'; switch (d % 10) {
            case 1: return "st";
            case 2: return "nd";
            case 3: return "rd";
            default: return "th";
          }
        }
      var arr = s.split('/');
      return arr[1] + nth(arr[1]) + " " + months[arr[0] - 1] + " " + arr[2];
     }

     document.querySelectorAll('.date-text').forEach(el => el.textContent = formatDateString(el.textContent));
// END OF CODE TO INSERT

})()

Hope this helps.