Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

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

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)
1.png

Screenshot for scenario (2)
2.png

The JS, currently for scenario (2):
JavaScript:
//**** 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:
JavaScript:
//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'
  );
}
 
Solution
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.
JavaScript:
//**** 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()...
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.
JavaScript:
//**** 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();
});
JavaScript:
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.
 
Solution
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!
 

New Threads

Buy us a coffee!

Back
Top Bottom