I have a short question on the datepicker. I use it for a customer entering its data (the datepicker for its birthday). It works fine in general. Just when the user clicks back from the following page and the page is being reloaded, the datepicker shows the previously entered birthday (so this is great) but when he clicks on the button to go back to the following page, today’s date is being passed on. Any idea of how to circumvent this issue? The related code snipplet is below. I have tried to restore the value of the datepicker several times in my code but it does not seem to function
import wixLocation from ‘wix-location’;
import wixStorage from ‘wix-storage’;
import wixWindow from ‘wix-window’; // Import wixWindow to open lightboxes
function saveFormValues() {
const datepicker1Value = $w(‘#datePicker1’).value;
// Store form values in session storage
if (datepicker1Value) {
const formattedDate = formatDate(datepicker1Value); // Store in custom format (dd-mm-yyyy)
wixStorage.session.setItem(‘datepicker1’, formattedDate); // Save only the formatted date
console.log("Formatted date stored:", formattedDate); // Output: 'dd-mm-yyyy' format
}
}
// Retrieve saved form values from session storage and populate the form fields
function restoreFormValues() {
const datepicker1Value = wixStorage.session.getItem(‘datepicker1’);
// Restore the form values if they exist
if (datepicker1Value) {
const [day, month, year] = datepicker1Value.split('-');
const restoredDate = new Date(`${year}-${month}-${day}`);
if (!isNaN(restoredDate.getTime())) {
$w('#datePicker1').value = restoredDate; // Restore the date picker
console.log("Restored datepicker value:", restoredDate);
// Call the logic that runs when the date picker value is changed
onDatePickerChange(restoredDate);
} else {
console.error("Invalid formatted date stored in session.");
}
}
}
function onDatePickerChange(dateValue) {
console.log(“Date picker value:”, dateValue);
if (dateValue) {
const calculatedAge = calculateAge(dateValue, new Date());
console.log(“Age calculated:”, calculatedAge);
}
}
function calculateAge(dob, asOfDate) {
const birthday = new Date(dob);
const comparisonDate = new Date(asOfDate);
let age = comparisonDate.getFullYear() - birthday.getFullYear();
let m = comparisonDate.getMonth() - birthday.getMonth();
if (m < 0 || (m === 0 && comparisonDate.getDate() < birthday.getDate())) {
age–;
m += 12;
}
let d = comparisonDate.getDate() - birthday.getDate();
if (d < 0) {
m–;
const lastMonth = new Date(comparisonDate.getFullYear(), comparisonDate.getMonth(), 0);
d += lastMonth.getDate();
}
return { years: age, months: m, days: d };
}
function formatDate(dateString) {
const date = new Date(dateString);
const day = String(date.getDate()).padStart(2, ‘0’);
const month = String(date.getMonth() + 1).padStart(2, ‘0’); // Months are zero-indexed
const year = date.getFullYear();
return ${day}-${month}-${year};
}
function parseJSONSafe(value, defaultValue) {
try {
return JSON.parse(value);
} catch (e) {
return defaultValue;
}
}
$w.onReady(async function () {
restoreFormValues();
const storedDate = wixStorage.session.getItem('datepicker1');
if (storedDate) {
// If the date is stored, convert it back to the Date object
const [day, month, year] = storedDate.split('-');
const restoredDate = new Date(`${year}-${month}-${day}`);
if (!isNaN(restoredDate.getTime())) {
$w('#datePicker1').value = restoredDate; // Set the restored date as the value
console.log("Restored datepicker value:", restoredDate);
// Call the logic that runs when the date picker value is changed
onDatePickerChange(restoredDate);
} else {
console.error("Invalid formatted date stored in session.");
}
}
$w('#datePicker1').onChange(() => {
const dateValue = $w('#datePicker1').value;
saveFormValues(); // Save the selected date
onDatePickerChange(dateValue); // Handle date change logic
});
$w('#button5').onClick(() => {
let datepicker1Value = $w('#datePicker1').value;
console.log (datepicker1Value);
if (!datepicker1Value) {
const storedDate = wixStorage.session.getItem('datepicker1');
if (storedDate) {
const [day, month, year] = storedDate.split('-');
datepicker1Value = new Date(`${year}-${month}-${day}`);
console.log("Restored date from session:", datepicker1Value);
$w('#datePicker1').value = datepicker1Value;
}
}
if (!datepicker1Value || isNaN(datepicker1Value.getTime())) {
console.error("Date of Birth is required or invalid.");
return; // Exit if no valid date is available
}
const formattedDate = formatDate(datepicker1Value); // Call the formatDate function
wixStorage.session.setItem('datepicker1', formattedDate); // Store the formatted date
console.log("Formatted date stored:", formattedDate);
