Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 2

Changing the date format of blog posts


Tenneil

Question

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

11 answers to this question

Recommended Posts

  • 2

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
  • 1

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
  • 0

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
  • 0

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
  • 0
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
  • 0
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
  • 0
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
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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