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...
  • 4 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
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
  • 11 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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

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.