При вводе даты события отображается неверная дата, когда местный часовой пояс изменен на американский ⇐ Jquery

[Гость]

Когда я меняю местный часовой пояс на часовой пояс США, дата события не работает должным образом. Он не отображает выбранную дату при вводе даты события; вместо этого отображается предыдущая дата. (Например: когда я выбираю 14.03.2024 в поле ввода, отображается 13.03.2024). Может ли кто-нибудь предложить решение этой проблемы, даже если местный часовой пояс меняется?
HTML:

Код: Выделить всё

Скрипт:

Код: Выделить всё

// Script for date formatting
function formatDate(inputId) {
const input = document.getElementById(inputId);
const value = input.value;

const dateObject = new Date(value);
const formattedDate = moment(dateObject).format(input.getAttribute("data-date-format"));

input.setAttribute("data-date", formattedDate);
}

// Trigger change event to initialize the custom display format
const pickup_date_validate = document.getElementById('pickup-date-validate');
if (pickup_date_validate) {
pickup_date_validate.dispatchEvent(new Event('change'));
}
const return_date_validate = document.getElementById('return-date-validate');
if (return_date_validate) {
return_date_validate.dispatchEvent(new Event('change'));
}
const event_date_validate = document.getElementById('event-date-validate');
if (event_date_validate) {
event_date_validate.dispatchEvent(new Event('change'));
}

jQuery(document).ready(function ($) {
// Initialize selectedPickUpDate and selectedReturnDate variables
let selectedPickUpDate;
let selectedReturnDate;

// Function to format date using moment.js
function formatMomentDate(date, format) {
return date ? moment(date).format(format) : "";
}

// Pickup Date
let pickUpDateSelect = document.getElementById("pickup-date-validate");
if (pickUpDateSelect !== null) {
// Set the minimum value for the input to the current date and time
const pickUpNow = moment();
pickUpDateSelect.min = formatMomentDate(pickUpNow, "YYYY-MM-DDTHH:mm");

// Event listener for pickup date selection
$(pickUpDateSelect).on("change input", function () {
selectedPickUpDate = moment($(this).val());

// Condition 1: When Pickup date is selected, set Return date minimum value
let returnMinDate = moment(selectedPickUpDate).add(1, 'days');
ReturnDateSelect.min = formatMomentDate(returnMinDate, "YYYY-MM-DDTHH:mm");

// Update data-date attribute and format
this.setAttribute("data-date", selectedPickUpDate ? selectedPickUpDate.format("MM-DD-YYYY HH:mm") : '');
this.setAttribute("data-date-format", "MM-DD-YYYY HH:mm");

// Update Event Date minimum value to allow selecting the pickup date
EventDateSelect.min = formatMomentDate(selectedPickUpDate, "YYYY-MM-DD");
});
}

// Return Date
let ReturnDateSelect = document.getElementById("return-date-validate");
if (ReturnDateSelect !== null) {
// Event listener for return date selection
$(ReturnDateSelect).on("change input", function () {
selectedReturnDate = moment($(this).val());

// Adjust Return date minimum value to prevent selecting the same date as the pickup date
let adjustedReturnMinDate = moment(selectedPickUpDate).add(1, 'days');
ReturnDateSelect.min = formatMomentDate(adjustedReturnMinDate, "YYYY-MM-DDTHH:mm");

// Condition 2: When Return date is selected, set Event date minimum and maximum values
let eventMinDate = moment(selectedPickUpDate);
let eventMaxDate = moment(selectedReturnDate);
EventDateSelect.min = formatMomentDate(eventMinDate, "YYYY-MM-DD");
EventDateSelect.max = formatMomentDate(eventMaxDate, "YYYY-MM-DD");

// Update data-date attribute and format
this.setAttribute("data-date", selectedReturnDate ? selectedReturnDate.format("MM-DD-YYYY HH:mm") :  '');
this.setAttribute("data-date-format", "MM-DD-YYYY HH:mm");
});
}

// Event Date
let EventDateSelect = document.getElementById("event-date-validate");
if (EventDateSelect !== null) {
// Event listener for event date selection
$(EventDateSelect).on("change input", function () {
const selectedEventDate = moment($(this).val());

// Disable pickup date and dates after return date in the event date selection
if (selectedReturnDate && selectedEventDate.isAfter(selectedReturnDate)) {
$(this).val(""); // Clear event date
}
});
}
});

Среда: WordPress:6.4.3, moment.js, PHP:8.0.30
При изменении местного часового пояса на американский и в поле ввода даты события выбрана дата, отображаемая дата должна точно совпадать с выбранной датой, без каких-либо расхождений или сдвигов во времени. Например, если пользователь выбирает дату «14.03.2024», в поле ввода должно постоянно отображаться «14.03.2024», независимо от каких-либо изменений в настройках местного часового пояса. Это гарантирует, что отображаемая дата останется синхронизированной с выбранным пользователем выбором, независимо от настроек часового пояса.

Подробнее здесь: https://stackoverflow.com/questions/781 ... o-us-based