Jump to content

Show complete publication dates for blog posts

Go to solution Solved by CassAggett,

Recommended Posts

I'd like each blog post to show the full publication date "Day Month Year" instead of just "Day Month".

I know the summary block shows the full date but I'd like users/readers who extract or use our content to be able to properly reference it.

Thanks for any help/advice you can provide

Link to comment
  • Solution

If this helped you, please like or mark my solution as answer so others can scroll to it quickly 👆

Cass Aggett is a Squarespace website designer for go-getting women – no matter what stage of business.

WEBSITEINSTAGRAM

 

Link to comment
  • 1 month later...

Squarespace actually puts the full blog post publication date on every blog page in a meta element with an itemprop='datePublished'. If you search for this item and get the content attribute, you can use this to inject into the published date element.

 

<script>
//only run the code after the dom has loaded
  document.addEventListener('DOMContentLoaded', function() {
    
    //get the blog post html item so that we can later replace this with the full published date
      var pubdate = document.getElementsByClassName("blog-meta-item--date");
    //get the published info from the meta property on the page
    var datePublishedMeta = document.querySelector('meta[itemprop="datePublished"]');
      for (var i = 0; i < pubdate.length; i++) {
        if (datePublishedMeta){
          //turn the meta date into a Date item so we can restyle it
          var d = new Date(datePublishedMeta.getAttribute('content'));
          //Set the dateStyle. I prefer 'long' to display the full month like March instead of Mar
         pubdate[i].innerText = d.toLocaleString('default', {dateStyle: 'long'}); 
        }
      }    
  });



</script>

 

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.