Jump to content

spelling out full months in blog post dates

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://www.thevaclaimslawyer.com/blog/good-news-for-military-families-and-civilians-who-live-and-work-at-camp-lejeune

A client has requested that the publish dates on individual blog posts are spelled out as opposed to abbreviated.

I found some similar javascript code posted elsewhere that changes the date format in general but can't find one that just manipulates the text of the month. So instead of "Jun 10" it would be "June 10."

Anyone have a simple script that would do the trick they would be willing to share?

 

Link to comment

here is some code I found that replaced the month abbreviations with Portuguese abbreviations. Also switches the date to appear first. All I would need would be to pair this down so that it only changes the text of the months to spell them out completely and not have any of the business where it switches the info around. My javascript ability isn't strong enough to know just what to take out and change.

<script>
    (function() {
        var dates = document.getElementsByClassName("dt-published date-highlight");
        var newDate;
        var i,I;
        // Create object with 'source' keys on the left, and 'output' values on the right.
        var months = {
            "Jan":"Jan",
            "Feb":"Fev",
            "Mar":"Mar",
            "Apr":"Abr",
            "May":"Mai",
            "Jun":"Jun",
            "Jul":"Jul",
            "Aug":"Ago",
            "Sep":"Set",
            "Oct":"Out",
            "Nov":"Nov",
            "Dec":"Dez"
        };
        // Loop through all dates, replacing months and reordering display.
        //  - Trim extra white space from beginning and end of date.
        //  - Replace multiple consecutive spaces with a single space.
        //  - Split by space into an array.
        //  - Replace month text based on 'months' object key:value pairs.
        //  - Convert array to string, rearranging display order of elements.
        //  - Set new date HTML.
        for (i=0, I=dates.length; i<I; i++) {
            newDate = dates[i].innerHTML.trim();
            newDate = newDate = newDate.replace(/  +/g, ' ');
            newDate = newDate.split(" ");
            newDate[0] = months[newDate[0]];
            newDate = newDate[1] + " " + newDate[0];
            dates[i].innerHTML = newDate;
        }
    })();
</script>

 

Edited by NewClassicalDesign
more context
Link to comment
  • Solution
14 hours ago, NewClassicalDesign said:

A client has requested that the publish dates on individual blog posts are spelled out as opposed to abbreviated. So instead of "Jun 10" it would be "June 10."

I found some similar javascript code posted elsewhere...My javascript ability isn't strong enough to know just what to take out and change.

@NewClassicalDesign If you want to change Jun 10 to June 10 (and not June 10, 2022) then you can use the JS that you quoted above. Add it to the Code Injection FOOTER. I've made some modifications to:

  • target the correct element [ document.querySelectorAll(".dt-published span") ]
  • change the output values to match the full month names [ "Jun":"June" ]
  • restore the correct MMM-DD order [ newDate = newDate[0] + " " + newDate[1]; ]
  • prevent it running on other pages [ if (dates.length > 0) ]

 

<script>
  (function() {
    var dates = document.querySelectorAll(".dt-published span");
    if (dates.length > 0) {
      var newDate;
      var i,I;
      // Create object with 'source' keys on the left, and 'output' values on the right.
      var months = {
        "Jan":"January",
        "Feb":"February",
        "Mar":"March",
        "Apr":"April",
        "May":"May",
        "Jun":"June",
        "Jul":"July",
        "Aug":"August",
        "Sep":"September",
        "Oct":"October",
        "Nov":"November",
        "Dec":"December"
      };
      for (i=0, I=dates.length; i<I; i++) {
        newDate = dates[i].innerHTML.trim();
        newDate = newDate = newDate.replace(/  +/g, ' ');
        newDate = newDate.split(" ");
        newDate[0] = months[newDate[0]];
        newDate = newDate[0] + " " + newDate[1];
        dates[i].innerHTML = newDate;
      }
    }
  })();
</script>

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
9 hours ago, paul2009 said:

@NewClassicalDesign If you want to change Jun 10 to June 10 (and not June 10, 2022) then you can use the JS that you quoted above. Add it to the Code Injection FOOTER. I've made some modifications to:

  • target the correct element [ document.querySelectorAll(".dt-published span") ]
  • change the output values to match the full month names [ "Jun":"June" ]
  • restore the correct MMM-DD order [ newDate = newDate[0] + " " + newDate[1]; ]
  • prevent it running on other pages [ if (dates.length > 0) ]

 

<script>
  (function() {
    var dates = document.querySelectorAll(".dt-published span");
    if (dates.length > 0) {
      var newDate;
      var i,I;
      // Create object with 'source' keys on the left, and 'output' values on the right.
      var months = {
        "Jan":"January",
        "Feb":"February",
        "Mar":"March",
        "Apr":"April",
        "May":"May",
        "Jun":"June",
        "Jul":"July",
        "Aug":"August",
        "Sep":"September",
        "Oct":"October",
        "Nov":"November",
        "Dec":"December"
      };
      for (i=0, I=dates.length; i<I; i++) {
        newDate = dates[i].innerHTML.trim();
        newDate = newDate = newDate.replace(/  +/g, ' ');
        newDate = newDate.split(" ");
        newDate[0] = months[newDate[0]];
        newDate = newDate[0] + " " + newDate[1];
        dates[i].innerHTML = newDate;
      }
    }
  })();
</script>

 

this worked wonderfully, thank you for your help!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.