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

Changing the date format of blog posts

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>

 

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 1

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

Share this post


Link to post
  • 0

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?

 

Share this post


Link to post
  • 0
Posted (edited)

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

Share this post


Link to post
  • 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?

Share this post


Link to post
  • 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 🙂

Share this post


Link to post
  • 0
Posted (edited)

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

Share this post


Link to post
  • 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 😆😆

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...