Jump to content

[FreeShare] Date display format options on all pages

Recommended Posts

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

image.png.5dc5a5868977c057c11220c00840a4a2.png

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

Edited by bangank36
Better result

Greeting, it's 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, Keyword Highlighter
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
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

Greeting, it's 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, Keyword Highlighter
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
  • 3 weeks later...
  • 2 weeks later...
On 12/16/2021 at 12:30 AM, Yadi said:

Problem solved

Greeting, it's 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, Keyword Highlighter
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
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?

Greeting, it's 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, Keyword Highlighter
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

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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?

Edited by bangank36

Greeting, it's 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, Keyword Highlighter
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
  • 2 weeks later...
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? 

Yes, this code can be applied to the blog page and individual blog post.

Kindly change the format in my blog with

const dateformat = "dd-mmm-yyyy";

Let me know how it works on your site

Edited by bangank36

Greeting, it's 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, Keyword Highlighter
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
  • 2 weeks later...

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>

 

Link to comment

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>

 

 

Link to comment
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?

Greeting, it's 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, Keyword Highlighter
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

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?

 

Link to comment
  • 1 month later...

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?

Screenshot 2022-03-22 at 11.44.25.jpg

Screenshot 2022-03-22 at 11.44.01.jpg

Link to comment
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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 2 weeks later...
  • 2 weeks later...
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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

Edited by KYK9
spelling
Link to comment
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

Edited by JoelleM
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.