WordPress – Event Date Input Displays Incorrect Date When Local Timezone Changed to US-based

When I change my local timezone to a US-based one, the event date does not work properly. It does not display the selected date in the event date input; instead, it displays the previous date. (For example: when I select 03-14-2024 in the input field, it displays 03-13-2024). Could someone please provide a solution to fix this issue, even when the local timezone changes?

HTML:

<input id="pickup-date-validate" class="form-control" type="datetime-local" data-date-format="YYYY-MM-DDThh:mm" onchange="formatDate('pickup-date-validate')" placeholder="Pickup date & Time" name="pickup_date" required>

<input id="return-date-validate" class="form-control" type="datetime-local" data-date-format="YYYY-MM-DDThh:mm"onchange="formatDate('return-date-validate')" placeholder="Return date & Time" name="return_date" required>

<input id="event-date-validate" class="form-control mt-xl-2 mt-lg-2 mt-md-0" type="date"
data-date-format="MM-DD-YYYY" onchange="formatDate('event-date-validate')" placeholder="Event date" name="event_date" required>

Script:

// 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
                }
            });
        }
    });

Environment: WordPress:6.4.3, moment.js, PHP:8.0.30

When the local timezone is changed to a US-based one and a date is selected in the event date input field, the displayed date should match the selected date accurately, without any discrepancies or shifts in time. For instance, if the user selects the date "03-14-2024", the input field should display "03-14-2024" consistently, irrespective of any changes in the local timezone setting. This ensures that the displayed date remains synchronized with the user’s intended selection, regardless of timezone adjustments.