Jump to content

With foundry template, how can I customize the date format to include the year?

Recommended Posts

Site URL: http://chriscampos.com

I would like to customize my foundry template so that when publishing a post it includes the full date, including the year.  For example, right now the date on a post I made in October says "Oct 25" but I would like it to say "Oct 25, 2020".

I have upgraded to a business plan to allow for customizations.  I have also searched this forum and other sites for the right code to add as a "code injection" but haven't found anything that works.  

I would truly appreciate any help with this issue.  Thanks!!

Example.jpeg

Link to comment
  • Replies 3
  • Created
  • Last Reply
2 hours ago, SlowBossa said:

Site URL: http://chriscampos.com

I would like to customize my foundry template so that when publishing a post it includes the full date, including the year.  For example, right now the date on a post I made in October says "Oct 25" but I would like it to say "Oct 25, 2020".

I have upgraded to a business plan to allow for customizations.  I have also searched this forum and other sites for the right code to add as a "code injection" but haven't found anything that works.  

I would truly appreciate any help with this issue.  Thanks!!

Example.jpeg

Add this snippet into Settings->Advanced->Code Injection Foter

<script>
document.addEventListener('DOMContentLoaded', function() {
	var months = [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
      'September',
      'October',
      'November',
      'December'
  ];
  var pubdate = document.querySelectorAll(".entry-title [pubdate][datetime]");
  for (var i = 0; i < pubdate.length; i++) {
      var d = pubdate[i].getAttribute("datetime");
      var _date = new Date(d);
      var year = _date.getFullYear();
      var month = months[_date.getMonth()].slice(0, 3);
      var date = _date.getDate();

      pubdate[i].innerHTML = month + " " + date + ", " + year;
      console.log(month + " " + date + ", " + year);
  }
});
</script>

image.png.af817370cb4c57fd05815ba995ef75cd.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
11 hours ago, bangank36 said:

<script> document.addEventListener('DOMContentLoaded', function() { var months = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]; var pubdate = document.querySelectorAll(".entry-title [pubdate][datetime]"); for (var i = 0; i < pubdate.length; i++) { var d = pubdate[i].getAttribute("datetime"); var _date = new Date(d); var year = _date.getFullYear(); var month = months[_date.getMonth()].slice(0, 3); var date = _date.getDate(); pubdate[i].innerHTML = month + " " + date + ", " + year; console.log(month + " " + date + ", " + year); } }); </script>

Thank you so much for responding bangank36!  I have added the code snippet to my site and I am getting a full date on my home page.  However, I noticed one thing that isn't working as intended.  The full date that is now showing is the day before the publication date.  In this case, I published the post on Feb 28, 2021 but on my site it reads "Feb 27, 2021".  Is there something that can be done to fix this?  Thanks again!!

Example2.jpeg

Link to comment
10 hours ago, SlowBossa said:

Thank you so much for responding bangank36!  I have added the code snippet to my site and I am getting a full date on my home page.  However, I noticed one thing that isn't working as intended.  The full date that is now showing is the day before the publication date.  In this case, I published the post on Feb 28, 2021 but on my site it reads "Feb 27, 2021".  Is there something that can be done to fix this?  Thanks again!!

Example2.jpeg

It just extract the date from the html, not modified anything. My best guess is maybe the timezone messed up the date. What is your timezone settings

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.