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

Date display format options


Yoav-Weiss

Question

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

16 answers to this question

Recommended Posts

  • 1
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 BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0

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 BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0

@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
  • 0
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 BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0
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 BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0
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
  • 0
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

Create an account or sign in to comment

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

×
×
  • Create New...