JavaScript How to set, and then update a Datetime updated field?

[we5inelgr]

Hi forum,

I'm using Bootstrap studio 5.3 and currently have a form with 23 fields on it. It's a form a user can save progress on and come back to at a later time or date, so there is a "Date Updated" field that is a read only datetime picker.

As of now, I can get the Date Updated field to either (1) set the date and time when the page loads, but can't get it to change after a page change, OR (2) don't set the date and time upon page load, but then set the date and time when the first change happens on the form...however, any subsequent change(s) do not update the field with the new time (I'm assuming date wouldn't update either, but have only tested this with different minutes between form changes).

The setting of this field value seems to be set once and then cannot change after that. I've tried setting date_updated to null and "" before setting it to the returned formattedDateTime, but neither worked as the initial form change datetime is set and does not get reset even if a form change is made a minute (or more) later.

I've also tried with, and without the "new" before calling the formattedDateTime function. Neither works.

How can I get the field to update after each form change?

Screenshot for scenario (1)


Screenshot for scenario (2)


The JS, currently for scenario (2):

//**** Date Updated ****//
//Set Date Updated field to current date time whenever a field is changed.
const form = document.querySelector('form');


form.addEventListener('change', function() {
    new getFormattedDateTime();


    document.querySelector('#date_updated').value= formattedDateTime;
});

which calls the getFormattedDateTime() function in another JS file:

//Account for timezones and formate date as mm/dd/yyyy HH:MM AM/PM
const date = new Date(Date.now());
const formattedDateTime = getFormattedDateTime(date);


function getFormattedDateTime(date) {
    alert ("getFormattedDateTime Function")
  const options = {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    hour12: false,
  };


  const formatter = new Intl.DateTimeFormat(undefined, options);
  const formattedDateTime = formatter.format(date);


  return formattedDateTime.replace(
    /(\d+)\/(\d+)\/(\d+), (\d+):(\d+)/,
    '$3-$1-$2T$4:$5'
  );
}

 

[Johna]

Hey there,

You've defined the date variable at the beginning of the JS file. This value is defined once and never changes.

To solve this, you can update the date variable each time the getFormattedDateTime() function is called. This can be achieved by removing the date parameter and placing const date = new Date(Date.now()); in the function. Then directly assign the returned value of the function to the #date_updated element.

//**** Date Updated ****//
//Set Date Updated field to current date time whenever a field is changed.
const form = document.querySelector('form');


form.addEventListener('change', function() {
  document.querySelector('#date_updated').value = getFormattedDateTime();
});

function getFormattedDateTime() {
  const date = new Date(Date.now());

  const options = {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    hour12: false,
  };


  const formatter = new Intl.DateTimeFormat(undefined, options);
  const formattedDateTime = formatter.format(date);


  return formattedDateTime.replace(
    /(\d+)\/(\d+)\/(\d+), (\d+):(\d+)/,
    '$3-$1-$2T$4:$5'
  );
}

You could also update the date each time in the event listener and pass the date as a parameter to the getFormattedDateTime() function.

 

[we5inelgr]

Hey there,

You've defined the date variable at the beginning of the JS file. This value is defined once and never changes.

To solve this, you can update the date variable each time the getFormattedDateTime() function is called. This can be achieved by removing the date parameter and placing const date = new Date(Date.now()); in the function. Then directly assign the returned value of the function to the #date_updated element.

Hello and thank you for the reply and suggestions. I really appreciate it!

And what a major 🤦‍♂️ on my part. Can't' believe it was right there at the top. Guess I had a major case of tunnel vision, clearly didn't see it.

You could also update the date each time in the event listener and pass the date as a parameter to the getFormattedDateTime() function.

I wound up going with this option because there is also a Date Started field that has to be set initially.

Thanks again, your post was most helpful!