Date display format options

I'm working on a blog for a client and they'd like to have the blog post date displayed in a certain format on the blog page and blog post page. Unless I'm blind, I don't see any format/display options for dates. On the blog page itself, dates are showing up like this: 03/04/20, and on the actual blog post, the date shows up like this: Mar 4.

I'd love to see ability to control date formatting (numbers, month names, hide year, show year, change the delimiters, etc). At the very least, be consistent across pages!

I'd also love to know if this can be done. 7.1

Looking for the same thing. Seems like something that should be included.

I'm not sure why this option is missing - surely this is a standard blogging feature? 

Same same

I am looking for the same. As I am using the Blog as my Event page (less limiting than Events) I would like to display Fri. Jan. 13, 2021 or even minimally Jan 13-21. It seems like that wouldn't be a big programming deal for SQSP.

Hep, waiting for it too.

There are at least 3 styles of format date on the same site!

Please add this snippet into Settings->Advanced->Code Injection to format the date the way you like it

<!-- Fix inconsistent blog 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 = "mm-dd-yyyy";
      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); 
      }
  });


</script>

The variable dateformat currently set with "mm-dd-yyyy", but you can change to different format (reference here)

These are some more format that supported:

"mm-dd-yyyy" --> 02-25-2021

"dd-mm-yyyy" --> 25-02-2021

"mm/dd/yyyy" --> 02/25/2021

"mmm dd yyyy" --> Feb/25/2021

@bangank36 I tried this for events, but this does not work.  Is there a way of making this code also work for Event dates for Squarespace 7.1 events (e.g. dd-mm-jjjj)?

And maybe even for Event times, to convert 12hr into 24hr system (e.g. 23:59:59) instead of the AM/PM Squarespace is using now?

Would be much appreciated if you could provide such code (since I don't know how to code).

Thanks in advance!

^Steven

3 hours ago, Groeipiraat said:

@bangank36 I tried this for events, but this does not work.  Is there a way of making this code also work for Event dates for Squarespace 7.1 events (e.g. dd-mm-jjjj)?

And maybe even for Event times, to convert 12hr into 24hr system (e.g. 23:59:59) instead of the AM/PM Squarespace is using now?

Would be much appreciated if you could provide such code (since I don't know how to code).

 

Thanks in advance!

^Steven

 

This is for blog date specifically, what is your site url

@bangank36 The site is currently still in DEV, so I can only share the link and password in a DM. Would that be okay? I would love posting the solution here once it works, just to help the community!

4 hours ago, Groeipiraat said:

@bangank36 The site is currently still in DEV, so I can only share the link and password in a DM. Would that be okay? I would love posting the solution here once it works, just to help the community!

Pls do I will have a look when have chance

On 7/2/2021 at 2:44 AM, Groeipiraat said:

@bangank36 The site is currently still in DEV, so I can only share the link and password in a DM. Would that be okay? I would love posting the solution here once it works, just to help the community!

Try

<!-- 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 = "mm-dd-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>

4 hours ago, bangank36 said:

Try

<!-- 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 = "mm-dd-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>

You are absolutely AMAZING! 

Thank you sooo much for this code! It worked perfectly to transform the US date and time to EU format.

I really appreciate your help! Have an amazing day and me the Gods be with you on your journey, my friend!

🙏

Thank you for the code. Worked great on my friend site.

On 3/8/2021 at 2:17 PM, bangank36 said:

There are at least 3 styles of format date on the same site!

Please add this snippet into Settings->Advanced->Code Injection to format the date the way you like it

<!-- Fix inconsistent blog 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 = "mm-dd-yyyy";
      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); 
      }
  });


</script>

The variable dateformat currently set with "mm-dd-yyyy", but you can change to different format (reference here)

These are some more format that supported:

"mm-dd-yyyy" --> 02-25-2021

"dd-mm-yyyy" --> 25-02-2021

"mm/dd/yyyy" --> 02/25/2021

"mmm dd yyyy" --> Feb/25/2021

Thank you!

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

This solution works beautifully for the blog page but does not change the date formatting on the actual blog post page. Does anyone know how to target the date on the post page as well?

On 8/13/2022 at 6:08 AM, jadebunk said:

This solution works beautifully for the blog page but does not change the date formatting on the actual blog post page. Does anyone know how to target the date on the post page as well?

What is site url? We can take a look

The site is still in development, but here is a link to the page with a password. The date format on the main blog page has changed:

https://armadillo-dove-4y6a.squarespace.com/monthlycommentary

pw: example

but the date format on the blog post page has not: 

https://armadillo-dove-4y6a.squarespace.com/monthlycommentary/blog-post-title-one-88nf7-a4fkw

pw: example

Thanks in Advance!

1 hour ago, jadebunk said:

The site is still in development, but here is a link to the page with a password. The date format on the main blog page has changed:

https://armadillo-dove-4y6a.squarespace.com/monthlycommentary

pw: example

but the date format on the blog post page has not: 

https://armadillo-dove-4y6a.squarespace.com/monthlycommentary/blog-post-title-one-88nf7-a4fkw

pw: example

Thanks in Advance!

Do you mean this one?

That's the one

The script has been updated, check