Jump to content

Ledii

Member
  • Posts

    1
  • Joined

  • Last visited

Reputation Activity

  1. Love
    Ledii got a reaction from Molotov in Changing the date format of blog posts   
    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
  2. Like
    Ledii got a reaction from LFyel101 in Changing the date format of blog posts   
    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.