当本地时区更改为美国时，事件日期输入显示不正确的日期

问题描述 投票：0回答：1

当我将本地时区更改为美国时区时，活动日期无法正常显示。不显示事件日期输入中选择的日期；相反，它显示前一个日期。 （例如：当我在输入字段中选择 03-14-2024 时，它显示 03-13-2024）。有人可以提供解决方案来解决这个问题，即使当地时区发生变化吗？

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 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

当本地时区更改为美国时区并在事件日期输入字段中选择日期时，显示的日期应与所选日期准确匹配，没有任何差异或时间变化。例如，如果用户选择日期“03-14-2024”，则输入字段应始终显示“03-14-2024”，无论本地时区设置如何更改。这可确保显示的日期与用户的预期选择保持同步，无论时区如何调整。

javascript html jquery wordpress momentjs
1个回答
0
投票
    // Script for date formatting
function formatDate(inputId) {
    const input = document.getElementById(inputId);
    const value = input.value;

    // Parse the date using Moment.js, explicitly specifying the input format
    const formattedDate = moment(value, input.getAttribute("data-date-format")).format(input.getAttribute("data-date-format"));

    // Update the value of the input field with the formatted date
    input.value = 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
            }
        });`enter code here`
    }
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.