Dynamically hide repeater button by date

Discussion Ask a question
, ,
1

Hi everyone, I really need some help urgently.

I have a members page which contains a repeater that is linked to a dataset (#dataset1), which contains a field key with a date and time (#cpdDate).

Site members come to this page to view classes they’ve booked, and have to fill in a register on a separate page to claim professional certification for the classes they have been in.

In the repeater I have a button (#btnCpdRegister) which I want to show/expand within a 48 hour window of the date and time field. I am going a little crazy having scoured these forums and tried nearly every option, but I seemingly cannot get it to work.

I’ve tried the following snippets, none of which I can seem to get to work and I’m not sure what I’m missing?

936×936 103 KB

//filter entire repeater by defined date
$w.onReady(function () {

var startD = new Date(‘12/05/2020’);
var endD = new Date(‘13/05/2020’);
var today = new Date();

if(startD >= today || endD <= today) {
    $w('#btnCpdRegister').collapse()
} else {
    $w('#btnCpdRegister').expand()
}

});

//filter entire repeater
$w.onReady(function () {

let today = new Date();
    $w("#dataset1").setFilter( wixData.filter() 
  .gt("cpdDate", today)
);
});

//filter entire repeater by defined date
$w.onReady(function () {

var startD = new Date('12/05/2020');
var endD = new Date('13/05/2020');
var today = new Date();

    if(startD >= today || endD <= today) {
        $w('#btnCpdRegister').collapse()
    } else {
        $w('#btnCpdRegister').expand()
        }
    });

//filter entire repeater by Today Date1

$w.onReady(function () {

$w("#dataset1").onReady( () => {
   console.log("The dataset is ready");
   let d = new Date();   // get today's date
   d.setHours(0,0,0,0);  // clear out the time
   $w("#dataset1").setFilter( wixData.filter()
   .lt("cpdDate", d)
   .or(
   wixData.filter().gt("cpdDate", d)
      )
   )
   .then( () => {
      console.log("Dataset is now filtered");
         } )
    .catch( (err) => {
    console.log(err);
    } );
    });
    
    });
2

You should use the Repeater’s onItemReady() function which runs for each item in a Repeater. You can then determine the display status of the elements in that item based on whatever criteria you want.

1 Like
3

Hi,
do you want to enable registration only for classes that start within 48 hours from the current date? is that what you are trying to achieve?
If you do please take a look at the repeater onItemReady function here ,
in the function you can set the button to be disabled based on the class’s date.

4

Hi @Yisrael (Wix) & Or,

What I am trying to achieve is to retrieve the # cpdDate of the individual database record and compare it to the current date .

If the current date exceeds 48 hours after the # cpdDate , or is before (less than) the # cpdDate I’d like the #btnCpdRegister to collapse/hide. Giving a 48 hour window of the button showing in each repeater item.

I’ve tried a few more things this evening, like creating data.js functions to retrieve the current date and time, and compare it, then inserting the function into the page Repeater’s onItemReady() function. But I am having no success.

My most recent code is as follows, but the button is expanding for all results regardless of the #cpdDate :

import wixData from 'wix-data';

$w.onReady(function () {
    $w("#dataset1").onReady( () => {
        console.log("The dataset is ready");   
 
            $w("#registeredCPDrepeater").onItemReady(($item, itemData, index) => {
                console.log("The repeater is ready");

 var today = new Date(); 
                        console.log(today , "Today Date");

 //sets date of expiration to "today" plus 1 day
                        today.setDate(today.getDate() + 1)
                            console.log(today , "Today Date plus 1 day");

 var alsotoday = new Date(); 
                        console.log(alsotoday , "Also Today Date");

                wixData.query('OnlineCPDAttendees')
                    .lt('cpdDate', today)
                    .gt('cpdDate', alsotoday)
                .find().then(results => {
                    console.log(results)
                $w('#btnCpdRegister').expand()
                });
            });
    });
});
5

I’ve got this to work as follows:

import wixData from 'wix-data';

$w.onReady(function () {
    $w("#yourDataset").onReady(() => {
        console.log("The dataset is ready");

        $w("#yourRepeaterName").onItemReady(($item, itemData, index) => {
            console.log("repeater ready");

 let today = new Date(); // get todays date
            today.setHours(0, 0, 0, 0);

 let todayStart = new Date(today); // today from 12 am
            today.setHours(23, 59, 59, 999);

 let todayEnd = new Date(today); // today at 11:59 pm

 const yourQueryInfo = itemData.cpdDate;

 const isToday = todayStart < yourQueryInfo && todayEnd > cpdDate; // give a true or false

            console.log(today);
            console.log(todayStart);
            console.log(todayEnd);
            console.log(yourQueryInfo);
            console.log(isToday);

 if (isToday) {
 // if it's true, show the button
                $item("#yourButtonName").exapnd()
            } else {
 // else hide 
                $item("#yourButtonName").collapse()
            }
        });
    });
});
6

hello, could you help me with that ?
i would like to show a box from current date untill 60 days after