Jump to content

Changing the date format of blog posts

Recommended 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>

 

Link to comment
  • 2 weeks later...
  • 2 weeks later...

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!

Edited by Romulusmap
Link to comment

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).

Link to comment

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?

Link to comment
  • 1 month later...
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 🙂

Link to comment

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...

Edited by Ledii
Link to comment
  • 4 weeks later...
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 😆😆

Link to comment
  • 6 months later...
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

Link to comment
  • 3 months later...
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

image.png.ee1f2025e6b2cd4cd1311f5fb85fe840.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 5 months later...

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

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 month later...
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

Link to comment
  • 1 year later...

Hello,

I found a code that almost works for me but the problem is that in Swedish text the dates is abbreviated, so for example November shows strange: 11 nov., 2023. How to get rid of the "," between date and year?

<script>
var a=['\x73\x6c\x69\x63\x65','\x71\x75\x65\x72\x79\x53\x65\x6c\x65\x63\x74\x6f\x72','\x6d\x65\x74\x61\x5b\x69\x74\x65\x6d\x70\x72\x6f\x70\x3d\x22\x64\x61\x74\x65\x50\x75\x62\x6c\x69\x73\x68\x65\x64\x22\x5d','\x63\x6f\x6e\x74\x65\x6e\x74','\x69\x6e\x6e\x65\x72\x54\x65\x78\x74','\x54\x68\x69\x73\x20\x73\x69\x74\x65\x20\x75\x73\x65\x73\x20\x61\x20\x63\x6f\x64\x65\x20\x73\x6e\x69\x70\x70\x65\x74\x20\x63\x6f\x70\x79\x72\x69\x67\x68\x74\x65\x64\x20\x62\x79\x20\x5b\x73\x66\x2e\x64\x69\x67\x69\x74\x61\x6c\x5d','\x74\x69\x6d\x65\x2e\x64\x74\x2d\x70\x75\x62\x6c\x69\x73\x68\x65\x64\x2e\x62\x6c\x6f\x67\x2d\x6d\x65\x74\x61\x2d\x69\x74\x65\x6d\x2e\x62\x6c\x6f\x67\x2d\x6d\x65\x74\x61\x2d\x69\x74\x65\x6d\x2d\x2d\x64\x61\x74\x65\x20\x73\x70\x61\x6e','\x44\x4f\x4d\x43\x6f\x6e\x74\x65\x6e\x74\x4c\x6f\x61\x64\x65\x64'];(function(b,e){var f=function(g){while(--g){b['push'](b['shift']());}};f(++e);}(a,0x180));var b=function(c,d){c=c-0x0;var e=a[c];return e;};window['\x61\x64\x64\x45\x76\x65\x6e\x74\x4c\x69\x73\x74\x65\x6e\x65\x72'](b('\x30\x78\x37'),c=>{console['\x6c\x6f\x67'](b('\x30\x78\x35'));var d;if(d=document[b('\x30\x78\x31')](b('\x30\x78\x36'))){var e=document[b('\x30\x78\x31')](b('\x30\x78\x32'))[b('\x30\x78\x33')];postYear=e[b('\x30\x78\x30')](0x0,0x4);d[b('\x30\x78\x34')]=d[b('\x30\x78\x34')]+'\x2c\x20'+postYear;}});
</script>

Edited by Mystah
Link to comment
15 hours ago, Mystah said:

Hello,

I found a code that almost works for me but the problem is that in Swedish text the dates is abbreviated, so for example November shows strange: 11 nov., 2023. How to get rid of the "," between date and year?

<script>
var a=['\x73\x6c\x69\x63\x65','\x71\x75\x65\x72\x79\x53\x65\x6c\x65\x63\x74\x6f\x72','\x6d\x65\x74\x61\x5b\x69\x74\x65\x6d\x70\x72\x6f\x70\x3d\x22\x64\x61\x74\x65\x50\x75\x62\x6c\x69\x73\x68\x65\x64\x22\x5d','\x63\x6f\x6e\x74\x65\x6e\x74','\x69\x6e\x6e\x65\x72\x54\x65\x78\x74','\x54\x68\x69\x73\x20\x73\x69\x74\x65\x20\x75\x73\x65\x73\x20\x61\x20\x63\x6f\x64\x65\x20\x73\x6e\x69\x70\x70\x65\x74\x20\x63\x6f\x70\x79\x72\x69\x67\x68\x74\x65\x64\x20\x62\x79\x20\x5b\x73\x66\x2e\x64\x69\x67\x69\x74\x61\x6c\x5d','\x74\x69\x6d\x65\x2e\x64\x74\x2d\x70\x75\x62\x6c\x69\x73\x68\x65\x64\x2e\x62\x6c\x6f\x67\x2d\x6d\x65\x74\x61\x2d\x69\x74\x65\x6d\x2e\x62\x6c\x6f\x67\x2d\x6d\x65\x74\x61\x2d\x69\x74\x65\x6d\x2d\x2d\x64\x61\x74\x65\x20\x73\x70\x61\x6e','\x44\x4f\x4d\x43\x6f\x6e\x74\x65\x6e\x74\x4c\x6f\x61\x64\x65\x64'];(function(b,e){var f=function(g){while(--g){b['push'](b['shift']());}};f(++e);}(a,0x180));var b=function(c,d){c=c-0x0;var e=a[c];return e;};window['\x61\x64\x64\x45\x76\x65\x6e\x74\x4c\x69\x73\x74\x65\x6e\x65\x72'](b('\x30\x78\x37'),c=>{console['\x6c\x6f\x67'](b('\x30\x78\x35'));var d;if(d=document[b('\x30\x78\x31')](b('\x30\x78\x36'))){var e=document[b('\x30\x78\x31')](b('\x30\x78\x32'))[b('\x30\x78\x33')];postYear=e[b('\x30\x78\x30')](0x0,0x4);d[b('\x30\x78\x34')]=d[b('\x30\x78\x34')]+'\x2c\x20'+postYear;}});
</script>

Is this the correct format for the language?

image.thumb.png.2275eab1ac68b32d3abff4719a88385c.png

you can try it on 

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 11 months later...
Posted (edited)

Dear all

I write here, because I would like to get the year of the actual publishing date of the blog post. You can just see month and day, e.g. May 29, even if the year is several years in the  past. And the JavaScript does not help if the year is missing - I would like to format the date to MM/YY. On the summary page it works as this date format includes the year.

I don't understand why they format it differently on the summary and blog item page! And it does only make sense to omit the year, if they calculate it correctly (e.g. you can omit if the post is from this year and in the past).

Thanks in advance,
Maeni

 

PS. I found the solution. You can find the publishing date in the metadata of the page - it can be read by JavaScript (and it works independently from the date format):
<meta itemprop="datePublished" content="2019-05-29T17:12:00+0200"/>

 

Edited by Maeni
Solution
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.