Code to display date/time a page within an Index was last modified?

I have a sticky "Last Updated on /Date/ at /Time/" div that I've custom-coded to appear on particular pages of a client's website. Currently, the client needs to go in to the custom code and manually enter the Date and Time whenever they update the page's content.

Is it possible to code this so the date and time automatically update whenever the client makes an edit to the page? There are multiple Indexes that will each need their own unique "updated at" box. It's important for the box to be sticky, visible no matter where you are on the page, because the content that gets updated is long; we want to ensure the user doesn't miss the "updated at" date and time.
 

Page example w/ current sticky block:

• https://veil-test-1.squarespace.com/rva-sa
• pass: test2019

The code is currently located in the PAGE HEADER CODE INJECTION of the Index Settings, and styled with custom css. I'm open to changing the whole set up if I can make it so the client doesn't have to get into the code at all!

Thanks in advance for any and all ideas!

Thanks so much, @brandon! This is super helpful. I'm going to reach out to my more-experienced-than-me dev friend to see if he can assist in implementing, and if he can't, I'm going to hit you up!

@alicroft

I know I'm super late to the party on this post, but... did you figure this out? And if so, would you be able to share the coding?

I'm looking to do something very similar.

2 hours ago, Robilanyo said:

@alicroft

I know I'm super late to the party on this post, but... did you figure this out? And if so, would you be able to share the coding?

I'm looking to do something very similar.

add the json parameter to your url and read the json data as such

https://dawidbania.com/joanna-wojciech-weddingday?format=json-pretty

Official document

View JSON Data — Squarespace Developers

@Robilanyo Here's what my developer came up with, and it seems to be holding up. Note this was all done on 7.0. Live page with the below code: https://www.theveilbrewing.com/rva-sa

#1 "Enable Ajax Loading" must be turned off for this to work. Located in:

Design> Site Styles > Site: Loading

#2 Code to be inserted into the Page header, located in:

Page > Settings > Advanced > PAGE HEADER CODE INJECTION

<script defer>
window.Squarespace.onInitialize(Y, function(){
  function addZero(i) {
    i = i < 10 ? "0" + i : i;
    return i;
  }

  function calcUpdatedTime(customDate) {
    const date2 = new Date(customDate);
    const displayDate = (date2.getMonth() + 1) + '/' + date2.getDate() + '/' + date2.getFullYear();
    const displayPM = date2.getHours() > 11 ? 'PM' : 'AM';
    const displayMinutes = addZero(date2.getMinutes());
    let displayHours = date2.getHours() > 12 ? (date2.getHours() - 12) : date2.getHours();
    if(date2.getHours() == 0) displayHours = 12;
    const displayTime = displayHours + ':' + displayMinutes + displayPM;

    return "UPDATED:<br />" + displayDate + "<br />@ " + displayTime;
  }

  function createUpdateLinkDiv() {
    updatedDiv = document.createElement('div');
    updatedDiv.setAttribute("id", "updated-at");
    updatedLink = document.createElement('a');
    updatedLink.setAttribute("id", "updated-link");
    updatedLink.setAttribute("href", "#rva-sa-update-note");
    updatedDiv.append(updatedLink);
    document.body.appendChild(updatedDiv);
  }

  let myHeaders = new Headers();
  myHeaders.append('pragma', 'no-cache');
  myHeaders.append('cache-control', 'no-cache');

  const myInit = {
    method: 'GET',
    headers: myHeaders,
  };

  const url = window.location.href.replace(location.hash,"") + "/?format=json-pretty";
  fetch(url, myInit)
  .then((resp) => resp.json())
  .then(function(data) {
    let recentUpdate = 0;
    const collections = data.collection.collections;
    for ( var i = 0; i < collections.length; i++ ) {

      if(collections[i].urlId.indexOf('beer-list') > -1){
        recentUpdate = collections[i].updatedOn;
      }
    }
    createUpdateLinkDiv();
    document.getElementById("updated-link").innerHTML = calcUpdatedTime(recentUpdate);

  })
  .catch(function(error) {
    // If there is any error you will catch it here
  });
});
</script>

#3 You can style the box by targeting #updated-at in your css here:
Design > Custom CSS 

Let me know if you have any questions, I will try to help!

Hi, do you know how I might possibly add this to my website? http://www.bestgradphoto.com

1 hour ago, sparkybooth said:

Hi, do you know how I might possibly add this to my website? http://www.bestgradphoto.com

What is your site template version, check it under Help menu

 My version is 7.1.