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

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, Lightbox Studio plugin
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
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

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, Lightbox Studio plugin
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.