[FreeShare] Date display format options on all pages

[16-May-2023] Update

The script has been updated, find the new solution here 

Hi guys,

Understanding the requirement to set consistently format date on all pages of website , I would like to share my solution to you .

1. Add the following codes to Home > Settings > Advanced > Code Injection

<!-- Fix inconsistent blog date format on Squarespace 7.1 template -->
<!-- Squarespace Forum Update 06-11-2021 -->
<script src="https://stevenlevithan.com/assets/misc/date.format.js"></script>
<script>
	    (function(){
        document.addEventListener('DOMContentLoaded', function() {
            const dateformat = "dd-mm-yyyy";
            const pubdates = document.querySelectorAll("time[datetime]:not([class*=event-time]), time[pubdate], time.blog-meta-item--date");
            pubdates.forEach(pubDate => {
                let d = new Date(pubDate.getAttribute("datetime") || pubDate.innerText);
                if (pubDate.classList.contains('blog-meta-item--date') ) {
                    d = new Date(document.querySelector('[itemprop="datePublished"]').getAttribute('content').split("T")[0]);
                }
                pubDate.innerHTML = d.format(dateformat); 
            });
        });
    })();
</script>

2. Change the 'dateformat' in my previous code with the date format you want to apply. Ex: dd-mm-yyy, mmm-dd-yyyy,...

Hope that it can help your sites properly

Let me know if you have any issue that needs to be solved.

Support me by pressing 👍 if this useful for you

Hi, it is not working on my page. would love to change the blog list page date format on my site. but after injecting the code above, nothing changed. Can you please help me?

On 11/26/2021 at 10:55 PM, Yadi said:

Hi, it is not working on my page. would love to change the blog list page date format on my site. but after injecting the code above, nothing changed. Can you please help me?

You share link to blog list page, we can help easier

On 11/26/2021 at 10:55 PM, Yadi said:

Hi, it is not working on my page. would love to change the blog list page date format on my site. but after injecting the code above, nothing changed. Can you please help me?

Hi @Yadi,

Can you share your site with the protected password for us to take a look?

On 11/29/2021 at 3:50 PM, bangank36 said:

Hi @Yadi,

Can you share your site with the protected password for us to take a look?

https://diaryofanintrovertng.com/

On 12/16/2021 at 12:30 AM, Yadi said:

https://diaryofanintrovertng.com/

 

Problem solved

I tried this on my site.
While it does change the format (I prefer yyyy-mm-dd) the date on the index is one day off of the date on the blog post.
Example: on the blog index I have a post with the date 2019-12-31 and when you click that post it comes up with the day 2019-12-30

3 hours ago, Glenn Hubbers said:

I tried this on my site.
While it does change the format (I prefer yyyy-mm-dd) the date on the index is one day off of the date on the blog post.
Example: on the blog index I have a post with the date 2019-12-31 and when you click that post it comes up with the day 2019-12-30

Can you share your site with the protected password so we can take a look?

I don't understand how I could share my site and password such that the world can't see it. Please advise.

@Glenn Hubbers

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

On 1/2/2022 at 11:00 PM, Glenn Hubbers said:

I don't understand how I could share my site and password such that the world can't see it. Please advise.

Have you solved it yet? Do you still need help?

I'm working on a website for a client who would like the dates on her blog page and each individual blog post to show as DD Month YYYY (i.e. 15th January 2022), is this possible with this code injection? 

11 hours ago, staceykaitlin said:

I'm working on a website for a client who would like the dates on her blog page and each individual blog post to show as DD Month YYYY (i.e. 15th January 2022), is this possible with this code injection? 

const dateformat = "dd-mmm-yyyy";

Hello

Thanks to tuanphan and bangank36 I've managed to finally have a "norwegian" setup for an event page. With norwegain names for days and months, norwegian order of things like 27 januar 2022 and lastly have the clock in bloody 24hr format. I'll paste the code I've stitched together from both of them below, so hopefully people should be able to grab that and change the days/months to their own language. I don't understand half of this code, so if it doesnt work for you "as pasted" I won't be able to help any further. As I said this is all tuanphan and bangank36's magic work 👌Thank you so so much!!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
const translate = {
    Jan: "jan",
    	Feb: "feb",
    	Mar: "mar",
    	Apr: "apr",
    	May: "mai",
    	Jun: "jun",
    	Jul: "jul",
    	Aug: "aug",
    	Sep: "sep",
    	Oct: "okt",
    	Nov: "nov",
    	Dec: "des"
}
const translate1 = {
    	January: "januar",
    	February: "februar",
    	March: "mars",
    	April: "april",
    	May: "mai",
    	June: "juni",
    	July: "juli",
    	August: "august",
    	September: "september",
    	October: "oktober",
    	November: "november",
    	December: "desember"
}
const day = {
    
    Monday: "Mandag",
    Tuesday: "Tirsdag",
    Wednesday: "Onsdag",
    Thursday: "Torsdag",
    Friday: "Fredag",
    Saturday: "Lørdag",
    Sunday: "Søndag"
}
$(document).ready(function() {
 $('[class*="-month"], time.event-date, .events-item-pagination-date').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 $('[class*="-month"], time.event-date, .events-item-pagination-date').each(function(i, e) {
     let text = $(e).html()
     for(let key in translate1) {
         text = text.replace(key, translate1[key])
     }
     for(let key in day) {
         text = text.replace(key, day[key])
     }
     console.log(text)
     $(e).html(text)
 })
})
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
jQuery(function($){
    $(".eventitem-backlink").html(function() { 
          return $(this).html().replace("Back to All Events", "Tilbake");  
    });
});
</script>

<!-- Fix inconsistent blog + event date format on Squarespace 7.1 template -->
<!-- Squarespace Forum 03-08-2021 -->
<script src="https://stevenlevithan.com/assets/misc/date.format.js"></script>
<script>
	document.addEventListener('DOMContentLoaded', function() {
      var dateformat = "d mmmm yyyy";
      var timeformat = "H:MM";
      
      var pubdate = document.querySelectorAll("time[datetime]:not([class*=event-time]), time[pubdate], time.blog-meta-item--date");
      for (var i = 0; i < pubdate.length; i++) {
          var d = new Date(pubdate[i].getAttribute("datetime") || pubdate[i].innerText);
          if ( pubdate[i].classList.contains('blog-meta-item--date') ) {
              d = new Date(document.querySelector('[itemprop="datePublished"]').getAttribute("content").split("T")[0]).getAttribute("content");
          }
          pubdate[i].innerHTML = d.format(dateformat); 
      }
     
      var eventTime = document.querySelectorAll("time[datetime][class*=event-time]");
            for (var i = 0; i < eventTime.length; i++) {
                  console.log(eventTime[i].getAttribute("datetime") + " " + eventTime[i].innerText);
                var d = new Date(eventTime[i].getAttribute("datetime") + " " + eventTime[i].innerText);

                eventTime[i].innerHTML = d.format(timeformat); 
            }
      var eventTimeSummary = document.querySelectorAll(".summary-metadata-item--event-time");
            for (var i = 0; i < eventTimeSummary.length; i++) {
                  var _24hrs = eventTimeSummary[i].querySelector(".event-time-24hr");
                  var _12hrs = eventTimeSummary[i].querySelector(".event-time-12hr");
                  _12hrs.innerHTML = _24hrs.innerHTML;
            }
  });


</script>

Well, that didn't take long 😉 hehe... I just realised I was missing a few more pieces to complete to ultimate setup. Maybe somebody has figured this out already!

As you can see on this page https://fjordcadenza.squarespace.com/konserter/iiro-rantala-new-trio (password: fjordcadenza) I have a little writeup, title, date and time. But my client also wants tags, categories and I'm playing around with the idea of having "source" be "buy tickets" or something.

But how do I change "Source" to say "Kjøp billetter", "Posted in" to say "Sjanger" and "Tagged" to say "Tags"?

I can imagine it being similar to the code(provided by tuanphan)  that made me able to change English months to Norwegian months etc, but I have no idea how to recreate that for these 3 specific things.

Anybody have some suggestions?

All that aside, I feel like the event module in SQ is super limited and almost more hassle than reward, but oh well 🤷🏼‍♂️

57 minutes ago, markusthorsen said:

Hello

Thanks to tuanphan and bangank36 I've managed to finally have a "norwegian" setup for an event page. With norwegain names for days and months, norwegian order of things like 27 januar 2022 and lastly have the clock in bloody 24hr format. I'll paste the code I've stitched together from both of them below, so hopefully people should be able to grab that and change the days/months to their own language. I don't understand half of this code, so if it doesnt work for you "as pasted" I won't be able to help any further. As I said this is all tuanphan and bangank36's magic work 👌Thank you so so much!!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
const translate = {
    Jan: "jan",
    	Feb: "feb",
    	Mar: "mar",
    	Apr: "apr",
    	May: "mai",
    	Jun: "jun",
    	Jul: "jul",
    	Aug: "aug",
    	Sep: "sep",
    	Oct: "okt",
    	Nov: "nov",
    	Dec: "des"
}
const translate1 = {
    	January: "januar",
    	February: "februar",
    	March: "mars",
    	April: "april",
    	May: "mai",
    	June: "juni",
    	July: "juli",
    	August: "august",
    	September: "september",
    	October: "oktober",
    	November: "november",
    	December: "desember"
}
const day = {
    
    Monday: "Mandag",
    Tuesday: "Tirsdag",
    Wednesday: "Onsdag",
    Thursday: "Torsdag",
    Friday: "Fredag",
    Saturday: "Lørdag",
    Sunday: "Søndag"
}
$(document).ready(function() {
 $('[class*="-month"], time.event-date, .events-item-pagination-date').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 $('[class*="-month"], time.event-date, .events-item-pagination-date').each(function(i, e) {
     let text = $(e).html()
     for(let key in translate1) {
         text = text.replace(key, translate1[key])
     }
     for(let key in day) {
         text = text.replace(key, day[key])
     }
     console.log(text)
     $(e).html(text)
 })
})
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
jQuery(function($){
    $(".eventitem-backlink").html(function() { 
          return $(this).html().replace("Back to All Events", "Tilbake");  
    });
});
</script>

<!-- Fix inconsistent blog + event date format on Squarespace 7.1 template -->
<!-- Squarespace Forum 03-08-2021 -->
<script src="https://stevenlevithan.com/assets/misc/date.format.js"></script>
<script>
	document.addEventListener('DOMContentLoaded', function() {
      var dateformat = "d mmmm yyyy";
      var timeformat = "H:MM";
      
      var pubdate = document.querySelectorAll("time[datetime]:not([class*=event-time]), time[pubdate], time.blog-meta-item--date");
      for (var i = 0; i < pubdate.length; i++) {
          var d = new Date(pubdate[i].getAttribute("datetime") || pubdate[i].innerText);
          if ( pubdate[i].classList.contains('blog-meta-item--date') ) {
              d = new Date(document.querySelector('[itemprop="datePublished"]').getAttribute("content").split("T")[0]).getAttribute("content");
          }
          pubdate[i].innerHTML = d.format(dateformat); 
      }
     
      var eventTime = document.querySelectorAll("time[datetime][class*=event-time]");
            for (var i = 0; i < eventTime.length; i++) {
                  console.log(eventTime[i].getAttribute("datetime") + " " + eventTime[i].innerText);
                var d = new Date(eventTime[i].getAttribute("datetime") + " " + eventTime[i].innerText);

                eventTime[i].innerHTML = d.format(timeformat); 
            }
      var eventTimeSummary = document.querySelectorAll(".summary-metadata-item--event-time");
            for (var i = 0; i < eventTimeSummary.length; i++) {
                  var _24hrs = eventTimeSummary[i].querySelector(".event-time-24hr");
                  var _12hrs = eventTimeSummary[i].querySelector(".event-time-12hr");
                  _12hrs.innerHTML = _24hrs.innerHTML;
            }
  });


</script>

 

12 hours ago, markusthorsen said:

Well, that didn't take long 😉 hehe... I just realised I was missing a few more pieces to complete to ultimate setup. Maybe somebody has figured this out already!

As you can see on this page https://fjordcadenza.squarespace.com/konserter/iiro-rantala-new-trio (password: fjordcadenza) I have a little writeup, title, date and time. But my client also wants tags, categories and I'm playing around with the idea of having "source" be "buy tickets" or something.

But how do I change "Source" to say "Kjøp billetter", "Posted in" to say "Sjanger" and "Tagged" to say "Tags"?

I can imagine it being similar to the code(provided by tuanphan)  that made me able to change English months to Norwegian months etc, but I have no idea how to recreate that for these 3 specific things.

Anybody have some suggestions?

All that aside, I feel like the event module in SQ is super limited and almost more hassle than reward, but oh well 🤷🏼‍♂️

 

Do you mean changing the date format from English to Norwegian?

No, Im all good regarding the date and time format. Everything is perfect!

But if you check out the link you can see below my text it says "source", "posted in" and "tagged in". I was wondering if it was possible to change these to be "whatever I want", similar to the way I've managed to change Monday to Mandag and October to Oktober. I guess I need to find the ID or class name of "source", "posted in" and "tagged in" and target those with some code? But that's way above my league 😂

8 hours ago, bangank36 said:

Do you mean changing the date format from English to Norwegian?

Hi guys. I've just discovered a weird bug... I've used the same code as i provided above here, and as I said before everything was working perfectly. But now I've discovered that Safari ignores the 24hr clock thing, but Chrome for some reason still honours it. As you can see in the pics, the code is identical... Or at least as far as I can see... Any ideas on what is going on?

7 hours ago, markusthorsen said:

I've discovered that Safari ignores the 24hr clock thing

You'll love this. Apple's JavaScript implementation of the Date function in Safari ( perhaps only older versions ) is choking on the input date format i.e. 2022-03-22. If you replace the dashes with forward slashes Safari is happy.

So basically your script is crashing out with an invalid date and doesn't make the 12 to 24 conversion.

So one way to take care of the issue is something like '2022-03-22 12:00 AM'.replace ( /-/g, '/' ) before passing into the Date function.

@bangank36

@tuanphan

Thanks so much for this @bangank36. It seems to be partially working - though for some reason I have two posts on my blog page and it is changing only one of them??

https://together-learning-trust-new.squarespace.com/news-views

Password: David123

On 4/4/2022 at 4:51 PM, JoelleM said:

Thanks so much for this @bangank36. It seems to be partially working - though for some reason I have two posts on my blog page and it is changing only one of them??

https://together-learning-trust-new.squarespace.com/news-views

Password: David123

@bangank36 have any idea why this might only be affecting the date on one post?

32 minutes ago, JoelleM said:

any idea why this might only be affecting the date on one post?

The issue is that the date format generated by SS is in dd/mm/yyyy format and Date requires mm/dd/yyyy. This is on the input side.

The code would need a few additional lines of code to work with dd/mm/yyyy dates.

The output can of course be controlled by the dateformat constant.

I too am having trouble with the date format. I added your code in  and it changed the format on the blog page but not the blog posts.  I want to  have mm-dd-yyyy.     The page is  https://www.kyk9.org/blog   

Also, how do I change the font on the date to match the rest of the page?

I appreciate any help

On 4/15/2022 at 7:20 PM, creedon said:

The issue is that the date format generated by SS is in dd/mm/yyyy format and Date requires mm/dd/yyyy. This is on the input side.

The code would need a few additional lines of code to work with dd/mm/yyyy dates.

The output can of course be controlled by the dateformat constant.

Thank you @creedon, though despite by best efforts that's a bit beyond me! What extra lines would @bangank36's code require?

It is working across the summary block and on individual posts. But on the blog page, only the most recent of the 4 posts appears in the corrected format. 
https://together-learning-trust-new.squarespace.com/news-views
PW: David123

On 11/6/2021 at 10:21 AM, bangank36 said:

Site URL: https://forum.squarespace.com/topic/158057-date-display-format-options/?fbclid=IwAR3c-LN_AFmqlTWG6uPvXzXLV9TqUKihXMjjvyrHfLgn-0NEqg2yXnztUys#comment-447653

Hi guys,

Understanding the requirement to set consistently format date on all pages of website , I would like to share my solution to you .

1. Add the following codes to Home > Settings > Advanced > Code Injection

<!-- Fix inconsistent blog date format on Squarespace 7.1 template -->
<!-- Squarespace Forum Update 06-11-2021 -->
<script src="https://stevenlevithan.com/assets/misc/date.format.js"></script>
<script>
	    (function(){
        document.addEventListener('DOMContentLoaded', function() {
            const dateformat = "dd-mm-yyyy";
            const pubdates = document.querySelectorAll("time[datetime]:not([class*=event-time]), time[pubdate], time.blog-meta-item--date");
            pubdates.forEach(pubDate => {
                let d = new Date(pubDate.getAttribute("datetime") || pubDate.innerText);
                if (pubDate.classList.contains('blog-meta-item--date') ) {
                    d = new Date(document.querySelector('[itemprop="datePublished"]').getAttribute('content').split("T")[0]);
                }
                pubDate.innerHTML = d.format(dateformat); 
            });
        });
    })();
</script>

2. Change the 'dateformat' in my previous code with the date format you want to apply. Ex: dd-mm-yyy, mmm-dd-yyyy,...

Hope that it can help your sites properly

Let me know if you have any issue that needs to be solved.

Support me by pressing 👍 if this useful for you

Hi there, I tried using this code on my site: https://chiroup.com It worked however it's a day off on each publication date if you look at the blog post and then on the blog home page. The dates don't match. They are off by one day. Please help.