Changing the date format of blog posts

Site URL: https://www.likeneonlove.com/

Is there any code I can use that will change the date format of my blog posts? At the moment, my latest post reads "Apr 15", but I'd like it displayed as "15 April". I managed to change the format of my summary block using the below script, but I can't seem to get it working for my actual blog page. I'm using the Skye template.

It's honestly infuriating that Squarespace STILL doesn't cater to its international customers. Having flexibility in changing date formats, US-based or not, should be a given for any website service!

<script>
 // Changes the format of date on summary items
 var myObj = document.getElementsByClassName('summary-metadata-item--date');
 var options = {  year: 'numeric', month: 'long', day: 'numeric' };
 for (var i = 0; i < myObj.length; ++i) {
     var item = myObj[i];  
     var date = new Date(item.innerHTML);
      item.innerHTML = date.toLocaleDateString('en-GB', options);
 }      
 </script>

I'm also having a problem with date formatting. The American date formatting looks jarring to our predominantly European viewers. Is there a fix coming, Squarespace?

Hi Tenneil, 

It seems you managed to change date as you wanted (I looked at your page and dates are in European format). Any chance you could share how you achieved that please?

Hey guys,

I've been looking for a solution to this problem myself and since I haven't found one, I've come up with my own. It's rather crude but should be efficient, when customized to your own template. Might change with time but just hit me and I'll try to help.

Inject it into the header and change the classes (if needed) for it to work. It's working after the page loaded so you might get a split second flash of old dates.

First code is for English users. Just switches  order around. Second one is for international users.

"//Changing blog grid view dates order."

• simply switches the display style from MM/DD/YYYY to DD/MM/YYYY.

"//Changing blog detailed view  dates."

• changes language to Polish (or any other if you substitute your own 🙂), as well as switches the order around.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  //Changing blog grid view dates order.
  $(document).ready(function() {
 	$('time.blog-date').each(function(){
       	let dateArray = this.innerText.split("/");
       	let dateCompiled = dateArray[1] + "/" + dateArray[0] + "/" + dateArray[2];
       	console.log(dateCompiled);
       	this.innerText = dateCompiled;
  	});
    
  //Changing blog detailed view dates.
    $('time.blog-meta-item--date').each(function(){
    	this.innerText = this.innerText.split(" ")[1] + " " + this.innerText.split(" ")[0];
    });
  });
  
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  //Changing blog grid view dates order.
  $(document).ready(function() {
 	$('time.blog-date').each(function(){
       	let dateArray = this.innerText.split("/");
       	let dateCompiled = dateArray[1] + "/" + dateArray[0] + "/" + dateArray[2];
      	console.log(dateCompiled);
       	this.innerText = dateCompiled;
  	});
    
  //Changing blog detailed view dates.
    $('time.blog-meta-item--date').each(function(){
    	if (this.innerText.split(" ")[0] === 'Jan'){
          this.innerText = this.innerText.split(" ")[1] + ' Stycznia';
        } else if (this.innerText.split(" ")[0] === 'Feb') {
          this.innerText = this.innerText.split(" ")[1] + ' Lutego';
        } else if (this.innerText.split(" ")[0] === 'Mar') {
          this.innerText = this.innerText.split(" ")[1] + ' Marca';
        } else if (this.innerText.split(" ")[0] === 'Apr') {
          this.innerText = this.innerText.split(" ")[1] + ' Kwietnia';
        } else if (this.innerText.split(" ")[0] === 'May') {
          this.innerText = this.innerText.split(" ")[1] + ' Maja';
        } else if (this.innerText.split(" ")[0] === 'June') {
          this.innerText = this.innerText.split(" ")[1] + ' Czerwca';
        } else if (this.innerText.split(" ")[0] === 'July') {
          this.innerText = this.innerText.split(" ")[1] + ' Lipca';
        } else if (this.innerText.split(" ")[0] === 'Aug') {
          this.innerText = this.innerText.split(" ")[1] + ' Sierpnia';
        } else if (this.innerText.split(" ")[0] === 'Sept') {
          this.innerText = this.innerText.split(" ")[1] + ' Września';
        } else if (this.innerText.split(" ")[0] === 'Oct') {
          this.innerText = this.innerText.split(" ")[1] + ' Października';
        } else if (this.innerText.split(" ")[0] === 'Nov') {
          this.innerText = this.innerText.split(" ")[1] + ' Listopada';
        } else if (this.innerText.split(" ")[0] === 'Dec') {
          this.innerText = this.innerText.split(" ")[1] + ' Grudnia';
        }
    });
  });
  
</script>

If anyone needs any help with their template, feel free to ask. I'll try to help. Thanks!

I don't know if this has been a recent fix but I was able to get the UK date format by going to Settings > Language & Region and choosing "English (United Kingdom)" as my language. Now in the overview they display as dd/mm/yy and when you click through it shows as number then month e.g. 6 May. It's still annoying that the formats are different in the overview to in the post (and both of those are different to summary blocks).

Hi Romulusmap, I've injected your code into my website and it works perfectly. I even translated it to my own language (Romanian). One thing, though. The current date format is something like "27, Maja", but I'd like to change it to "27 Maja 2020" (so without the comma and with the added current year). Didn't manage to do that. Can you help?

On 5/18/2020 at 3:40 PM, Romulusmap said:

Hey guys,

I've been looking for a solution to this problem myself and since I haven't found one, I've come up with my own. It's rather crude but should be efficient, when customized to your own template. Might change with time but just hit me and I'll try to help.

Inject it into the header and change the classes (if needed) for it to work. It's working after the page loaded so you might get a split second flash of old dates.

First code is for English users. Just switches  order around. Second one is for international users.

 

"//Changing blog grid view dates order."

• simply switches the display style from MM/DD/YYYY to DD/MM/YYYY.

"//Changing blog detailed view  dates."

• changes language to Polish (or any other if you substitute your own 🙂), as well as switches the order around.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  //Changing blog grid view dates order.
  $(document).ready(function() {
 	$('time.blog-date').each(function(){
       	let dateArray = this.innerText.split("/");
       	let dateCompiled = dateArray[1] + "/" + dateArray[0] + "/" + dateArray[2];
       	console.log(dateCompiled);
       	this.innerText = dateCompiled;
  	});
    
  //Changing blog detailed view dates.
    $('time.blog-meta-item--date').each(function(){
    	this.innerText = this.innerText.split(" ")[1] + " " + this.innerText.split(" ")[0];
    });
  });
  
</script>

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  //Changing blog grid view dates order.
  $(document).ready(function() {
 	$('time.blog-date').each(function(){
       	let dateArray = this.innerText.split("/");
       	let dateCompiled = dateArray[1] + "/" + dateArray[0] + "/" + dateArray[2];
      	console.log(dateCompiled);
       	this.innerText = dateCompiled;
  	});
    
  //Changing blog detailed view dates.
    $('time.blog-meta-item--date').each(function(){
    	if (this.innerText.split(" ")[0] === 'Jan'){
          this.innerText = this.innerText.split(" ")[1] + ' Stycznia';
        } else if (this.innerText.split(" ")[0] === 'Feb') {
          this.innerText = this.innerText.split(" ")[1] + ' Lutego';
        } else if (this.innerText.split(" ")[0] === 'Mar') {
          this.innerText = this.innerText.split(" ")[1] + ' Marca';
        } else if (this.innerText.split(" ")[0] === 'Apr') {
          this.innerText = this.innerText.split(" ")[1] + ' Kwietnia';
        } else if (this.innerText.split(" ")[0] === 'May') {
          this.innerText = this.innerText.split(" ")[1] + ' Maja';
        } else if (this.innerText.split(" ")[0] === 'June') {
          this.innerText = this.innerText.split(" ")[1] + ' Czerwca';
        } else if (this.innerText.split(" ")[0] === 'July') {
          this.innerText = this.innerText.split(" ")[1] + ' Lipca';
        } else if (this.innerText.split(" ")[0] === 'Aug') {
          this.innerText = this.innerText.split(" ")[1] + ' Sierpnia';
        } else if (this.innerText.split(" ")[0] === 'Sept') {
          this.innerText = this.innerText.split(" ")[1] + ' Września';
        } else if (this.innerText.split(" ")[0] === 'Oct') {
          this.innerText = this.innerText.split(" ")[1] + ' Października';
        } else if (this.innerText.split(" ")[0] === 'Nov') {
          this.innerText = this.innerText.split(" ")[1] + ' Listopada';
        } else if (this.innerText.split(" ")[0] === 'Dec') {
          this.innerText = this.innerText.split(" ")[1] + ' Grudnia';
        }
    });
  });
  
</script>

If anyone needs any help with their template, feel free to ask. I'll try to help. Thanks!

Might there be anyway this will apply on events, as I have the same problem in my event listing. Thanks 🙂

Hi. The scripts above did not work for me.
I figure this is due to differences in how templates handle the html.

I tried to make it a bit more generic by using meta-data and common tags.
Another huge upgrade is that I'm converting the strings to Date objects.
That way you don't have to deal with manual if cases. And can choose to format to something localized based on context. (Only blog-post pages has a time signature though, not sure if this is a template fault or squarespace fault)

Hopefully this will work for more templates.

It needs to have two separate behaviours based on weather it is on a blog post page or not.
As normal pages might have several dates to update. While a blog post has one that is handled a little differently.

I made a shared function that handles the formatting at least. So they all should get the same formatted text and different elements get fed in. You may replace the steps inside the updateDateElement function with a format of your liking. 😃

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    //Figure out context (blog-post or not?)
    var dateMeta = document.querySelector('[itemprop=datePublished]');
    if (dateMeta != null) {
      //Handle blog post date
      var publishedDate = new Date(dateMeta.content);
      var dateElem = document.querySelector('time span');
      updateDateElement(dateElem, publishedDate);
    }
    else {
      //Handle all dates on page
      var times = document.querySelectorAll('time');
      for (var i = 0; i < times.length; i++) {
        var dateElem = times[i];
        var publishedDate = new Date(dateElem.innerHTML);
        updateDateElement(dateElem, publishedDate);
      }
    }
  });
  
  function updateDateElement(elem, date) {
    //Construct new display string
    //If you want a different localization, you can change the 'en-US'.
    //You can also type in undefined insteath of 'en-US' and let the device choose.
    var dateFormat = { year: 'numeric', month: 'long', day: 'numeric' };
    var newFormat = date.toLocaleDateString('en-US', dateFormat);
    
    //Assign new string
    elem.textContent = newFormat;
  }
</script>

I wanted to do mine in native js.
Thought this might be slightly kinder on the load-time.
But some neat formatting libraries I found along the way...

• https://github.com/datejs/Datejs
• https://momentjs.com/
• https://www.npmjs.com/package/dateformat

On 5/26/2020 at 12:42 PM, thewheelexists said:

I don't know if this has been a recent fix but I was able to get the UK date format by going to Settings > Language & Region and choosing "English (United Kingdom)" as my language. Now in the overview they display as dd/mm/yy and when you click through it shows as number then month e.g. 6 May. It's still annoying that the formats are different in the overview to in the post (and both of those are different to summary blocks).

That's exactly what I did and it worked instantly.  Not sure why everyone is still talking a out complicated code 😆😆

On 5/26/2020 at 12:42 PM, katycarlisle said:

I don't know if this has been a recent fix but I was able to get the UK date format by going to Settings > Language & Region and choosing "English (United Kingdom)" as my language. Now in the overview they display as dd/mm/yy and when you click through it shows as number then month e.g. 6 May. It's still annoying that the formats are different in the overview to in the post (and both of those are different to summary blocks).

Thank you, I appreciate it.

 It worked instantly. No fuss!

I'm in UK btw

@tuanphan Do you happen know how to fix the date formatting in the blog for the site link below? I appreciate your help. Thank you! https://www.ristudiodallas.com/a-rendered-interior/spring-maintenance-tips-for-your-home

4 hours ago, dovely said:

@tuanphan Do you happen know how to fix the date formatting in the blog for the site link below? I appreciate your help. Thank you! https://www.ristudiodallas.com/a-rendered-interior/spring-maintenance-tips-for-your-home

This solution work with your template

Blog collection page - move metadata to bottom + reformat date (7.1) - Coding and Customization - Squarespace Forum

I've updated a general new solution for this requirement in the following post:

It can set a unique format date on all pages

If you have any issue when implementing it, do not hesitate to reply on my threat

Really helpful, thanks a lot. 

On 5/26/2020 at 1:42 PM, katycarlisle said:

I don't know if this has been a recent fix but I was able to get the UK date format by going to Settings > Language & Region and choosing "English (United Kingdom)" as my language. Now in the overview they display as dd/mm/yy and when you click through it shows as number then month e.g. 6 May. It's still annoying that the formats are different in the overview to in the post (and both of those are different to summary blocks).

Okay so it seems like to change to an European format date. it does work if you change it to English (United Kingdom) The format will change immediately to dd/mm/yyyy.

However i had my settings on Norwegian. yet the Date format was not in an European format. So changing to English (United Kingdom) is the most easy way to do it