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