Оновлення поля дати та часу після зміни на формі в JavaScript: Збереження одного поля при завантаженні сторінки

8 Березня 2024 в 01:30 21

Проблема оновлення поля дати та часу після змін на формі при завантаженні сторінки може виникнути у проектах, де важливо зберігати певний час як початкове значення. Наприклад, у системах управління даними, де потрібно відстежувати час створення та останнього оновлення запису.

Розглянемо конкретну ситуацію: у вас є форма з різними вхідними полями, включаючи поля “Початкова дата/час” та “Оновлена дата/час”. При завантаженні сторінки поле “Початкова дата/час” заповнене значенням у форматі “mm/dd/yyyy HH:MM AM/PM”. Є також інтерфейс вибору дати/часу для цього поля, щоб можна було вручну змінити дату/час на минулу. Поле “Оновлена дата/час” є тільки для читання та має бути встановлене спочатку при завантаженні сторінки, а потім оновлюватись при будь-якій зміні в будь-якому полі форми.

Наразі код, який ви використовуєте, оновлює як поле “Початкова дата/час”, так і поле “Оновлена дата/час” при кожній зміні форми, що не відповідає очікуваному результату.

Щоб виправити цю проблему, потрібно змінити код JavaScript. Правильно встановити умови оновлення поля “Оновлена дата/час” та зберегти початкове значення поля “Початкова дата/час” при завантаженні сторінки. Давайте розглянемо варіант вирішення цієї проблеми.

Для початку, переглянемо наданий вами JavaScript код:

const date = new Date(Date.now());
const formattedDateTime = getFormattedDateTime(date);
function getFormattedDateTime(date) {
  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'
  );
}
document.querySelector('#date_started').value = formattedDateTime;
document.querySelector('#date_updated').value = formattedDateTime;
const form = document.querySelector('form');
form.addEventListener('change', function() {
  if (dateUpdated === "false") {
    dateUpdated = "true";
    getFormattedDateTime(undefined);
  }
});

const date = new Date(Date.now());

const formattedDateTime = getFormattedDateTime(date);

function getFormattedDateTime(date) {

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'

);

}

document.querySelector('#date_started').value = formattedDateTime;

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

const form = document.querySelector('form');

form.addEventListener('change', function() {

if (dateUpdated === "false") {

dateUpdated = "true";

getFormattedDateTime(undefined);

}

});

Проблема поля “Початкова дата/час” оновлюється при кожній зміні форми через подію ‘change’. Щоб виправити це, нам потрібно перевірити, чи не було вже оновлення поля “Оновлена дата/час” при попередніх змінах форми. Якщо ні, тоді ми можемо оновити значення цього поля, використовуючи власну функцію форматування дати/часу.

Нижче наведений оновлений JavaScript код:

const date = new Date(Date.now());
const formattedDateTime = getFormattedDateTime(date);
function getFormattedDateTime(date) {
  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'
  );
}
document.querySelector('#date_started').value = formattedDateTime;
document.querySelector('#date_updated').value = formattedDateTime;
const form = document.querySelector('form');
form.addEventListener('change', function() {
  if (dateUpdated === "false") {
    dateUpdated = "true";
    getFormattedDateTime(undefined);
  }
});