Jump to content

Date display format options

Recommended Posts

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!

Link to comment
  • 2 weeks later...
  • 3 weeks later...
  • 9 months later...
  • 2 weeks later...
  • 4 weeks later...
  • 3 weeks later...

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

image.thumb.png.a0c7ba8eca7aec70aa5f2c2d6fd56998.png

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

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
  • 3 months later...

@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

 

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

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

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

image.png.3ace0653b3d71801fd010f7420b99d1c.png

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

image.png.3ace0653b3d71801fd010f7420b99d1c.png

You are absolutely AMAZING! 

Link to comment
  • 3 weeks later...
  • 1 month later...
On 3/8/2021 at 2:17 PM, bangank36 said:

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

image.thumb.png.a0c7ba8eca7aec70aa5f2c2d6fd56998.png

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!

Link to comment
  • 2 months later...

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

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
  • 8 months later...
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

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
  • 2 weeks later...
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?

image.thumb.png.7238366f7dcf9dec68a9a4047763f055.png

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

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.