Jump to content

Ledii

Member
  • Posts

    1
  • Joined

  • Last visited

Everything posted by Ledii

  1. Hi. The scripts above did not work for me. I figure this is due to differences in how templates handle the html. I tried to make it a bit more generic by using meta-data and common tags. Another huge upgrade is that I'm converting the strings to Date objects. That way you don't have to deal with manual if cases. And can choose to format to something localized based on context. (Only blog-post pages has a time signature though, not sure if this is a template fault or squarespace fault) Hopefully this will work for more templates. It needs to have two separate behaviours based on weather it is on a blog post page or not. As normal pages might have several dates to update. While a blog post has one that is handled a little differently. I made a shared function that handles the formatting at least. So they all should get the same formatted text and different elements get fed in. You may replace the steps inside the updateDateElement function with a format of your liking. 😃 <script> document.addEventListener("DOMContentLoaded", function(event) { //Figure out context (blog-post or not?) var dateMeta = document.querySelector('[itemprop=datePublished]'); if (dateMeta != null) { //Handle blog post date var publishedDate = new Date(dateMeta.content); var dateElem = document.querySelector('time span'); updateDateElement(dateElem, publishedDate); } else { //Handle all dates on page var times = document.querySelectorAll('time'); for (var i = 0; i < times.length; i++) { var dateElem = times[i]; var publishedDate = new Date(dateElem.innerHTML); updateDateElement(dateElem, publishedDate); } } }); function updateDateElement(elem, date) { //Construct new display string //If you want a different localization, you can change the 'en-US'. //You can also type in undefined insteath of 'en-US' and let the device choose. var dateFormat = { year: 'numeric', month: 'long', day: 'numeric' }; var newFormat = date.toLocaleDateString('en-US', dateFormat); //Assign new string elem.textContent = newFormat; } </script> I wanted to do mine in native js. Thought this might be slightly kinder on the load-time. But some neat formatting libraries I found along the way... https://github.com/datejs/Datejs https://momentjs.com/ https://www.npmjs.com/package/dateformat
×
×
  • 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.