Hey Wix team, I was wondering if someone could point me in the direction of some code that will enable me to disable/change display of a button if todays date is less then 30 days from a date displayed in a text field (taken from the database) this would change the 'Paid' to 'Overdue'
The full code
function fillRepeaterUpcomingTrips (){
let user = wixUsers.currentUser;
let userId = user.id;
wixData.query('CourseAvailability')
.eq("_owner", userId)
.ascending("date")
.find()
.then((results) => {
if (results.totalCount > 0) {
$w('#box77').expand();
$w('#bookedCoursesRepeater').data = results.items;
$w('#bookedCoursesRepeater').onItemReady (($w, itemData, index) =>{
$w("#courseTitleText").text = itemData.title;
$w("#totalPriceText").text = "£" + itemData.totalPrice;
$w("#courseStartDate").text = itemData.date.toDateString();
$w("#paymentReceivedText").value = itemData.paymentReceived;
$w("#participantsText").value = itemData.numberOfParticipants;
$w("#outstandingBalanceText").value = itemData.outstandingBalance;
let fullNameFromDatabase = itemData.fullName;
let tripIDFromDataBase = itemData._id;
let outstandingDate = itemData.date.toDateString();
var currentDate = new Date();
if ((currentDate - 30) < outstandingDate) {
$w('#statusButton').label = "Overdue"
$w('#statusButton').style.backgroundColor = "Red"
}
$w("#payButton").onViewportEnter((event) => {
if ($w('#outstandingBalanceText').value < 1){
$w('#statusButton').label = "Paid"
$w('#statusButton').disable();
$w('#payButton').disable();
$w('#payButton').label = "Paid in Full"
}
else {
$w('#payButton').enable();
$w('#payButton').label = "Pay Now"
$w("#payButton").onClick( (eventOne) => {
let tripID = tripIDFromDataBase;
let courseTitle = $w('#courseTitleText').text;
let totalPrice = $w('#totalPriceText').value;
let paidToday = $w("#outstandingBalanceText").value;
let fullName = fullNameFromDatabase;
local.setItem("tripID", tripIDFromDataBase);
local.setItem("totalPrice", totalPrice)
local.setItem("paidToday", paidToday);
local.setItem("courseTitle", courseTitle);
local.setItem("fullName", fullName);
console.log(totalPrice)
wixWindow.openLightbox("Logged in Payment");
})
}
});
})
}
else {
fillRepeaterPreviousTrips()
}
})
}
The section I'm struggling with...
let outstandingDate = itemData.date.toDateString();
var currentDate = new Date();
if ((currentDate - 30) < outstandingDate) {
$w('#statusButton').label = "Overdue"
$w('#statusButton').style.backgroundColor = "Red"
}
Also, on separate note with the "viewpoint enter" for the change for the buttons, can this be done with a cleaner code? Can this be run "onReady" instead? I've treid various options and this is the only way I can get it to work.
Thank you!
Hi Stephen,
When you do date arithmetic and comparisons in JavaScript, it's dealing in milliseconds. To get thirty days from now, this code will do it:
var currentDate = new Date(); var currentTime = currentDate.getTime(); //86400000 milliseconds in a day var timeThirtyDaysHence = currentTime + (30 * 86400000); var thirtyDaysHence = new Date(timeThirtyDaysHence); console.log(thirtyDaysHence); if (thirtyDaysHence > outstandingDate) { $w('#statusButton').label = "Overdue" $w('#statusButton').style.backgroundColor = "red" }
You need to make sure the outstandingDate variable is a true Javascript date. There would be no need to use the toDateString() function. If I'm understanding the intent of your logic correctly, the test would be thirty days from now is greater than the outstandingDate.