30 days between todays date and a date from an input, then carry out a function

Ask the community
,
1

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’

1920×1080 219 KB

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!

2

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.

3

Works like a charm! Thank you @tony-brunsman :slight_smile: Do you have any advice on the onViewpoint enter line of code? I’m sure I’m missing something silly but it’s the only work around I can find atm… basically each button needs to come into view before deciding what ‘state’ the button is in and the code is executed. Thanks again, much appreciated!

4

@stephenmccall Is fillRepeaterUpcomingTrips being called from the onReady? If so, essentially the onViewportEnter event code is being declared/initiated there already. Personally, I prefer creating the event function from the property sheet with the repeater selected.

OnViewportEnter is not merely a workaround but is a good place to put that code for your intended purpose. It is doing what you want, right? With repeaters, you don’t want to execute all your code up front if you can avoid it because of load time issues.

5

@tony-brunsman thats a good point about the loading speed. I do call it on the onReady. Thanks very much for all your help, much appreciated :blush: