Show complete publication dates for blog 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

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>

Hi there,
I used the code aboven 

On 8/28/2023 at 7:40 PM, jcweaver said:

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>

 

Hi there!
I used this code to show the year on my blogsposts. It works really well and even shows the month in letters (like 'steptember'). So far, so good, 🙂

BUT... one problem: at the moment it works in the trial-mode, but from the moment I will upgrade the website to a Personal plan, the Code injector will not work anymore. 

Is there another way to make this work?

For example: with the Custom CSS fields, or with code in the footer (Edit > Edit Site Footer > Add a block > Code)? The code above isn't working in those fields. 

11 hours ago, Jorinde said:

but from the moment I will upgrade the website to a Personal plan, the Code injector will not work anymore.

The personal plan does not support running custom JavaScript. You need the business plan or above.

On 4/10/2024 at 10:52 PM, creedon said:

The personal plan does not support running custom JavaScript. You need the business plan or above.

So there is now way to get around this? For example, with a code in the footer?
It would be such a shame to have to upgrade to a business plan, just for this date adjustment. 🙈

In this example below the code, originally for code injector, did also work in the footer code:
Still hoping for a solution like that 🙂