Help with IF statement between startDate and finishDate

Ask the community
,
1

Hi Velo gods, I am in need of some assistance please.

In basic terms I have a collection called Sites List which has startDate and finishDate fields, I need to be able to display an OPEN NOW sign (text or image) when the current date is within the startDate and finishDate. They are campsites so I am simply trying to show a sign when that site is open.

I am not a coder so I know the below isn’t right but I have been trying for hours now and I am clearly missing something. I have tried many combinations of this using .ge and .le rather than >= etc and also tried using .toLocaldatestring etc but it doesn’t work.

        var today = new Date();

        if (itemData.startDate >= today && itemData.finishDate <= today)
            $item('#opennowtext').show();

If anyone can push me in the right direction here I would really appreciate it.

To show I have got a functioning .onReady, the below is an expanded version of the code which contains my other if statements for this page. There is much more code which is for filtering but I don’t think it will impact this aspect of the code.


    $w('#repeater1').onItemReady(($item, itemData) => {
        console.log(itemData.finishDate)
        $item('#viewbutton').style.backgroundColor = itemData.nights < 6 ? "#F25822" : "#00C3FF"

        if (itemData.price.length > 20)
            $item('#pricetextlong').expand();

        if (itemData.price.length <= 20)
            $item('#pricetext').expand();

        if (itemData.cancelled)
            $item("#cancelledimage").show();

        if (itemData.nights > 5)
            $item("#thslogo").show();

        if (itemData.nights <= 5)
            $item("#weekendmeetlogo").show();

        if (itemData.featuredEvent)
            $item("#featuredimagebox").show();

        if (itemData.ehuAvailable)
            $item('#ehuavailableicon').show();

        if (itemData.ehuIncluded)
            $item('#ehuincludedicon').show();

        if (itemData.featuredEvent)
            $item('#titletext').hide();

        if (itemData.featuredEvent)
            $item('#featuredeventtitle').show();

        if (itemData.featuredEvent)
            $item('#smalltitleiffeatured').show();

            
        var today = new Date();

        if (itemData.startDate >= today && itemData.finishDate <= today)
            $item('#opennowtext').show();
    
    
    
    })

Thanks

2

Hello,

When using dates, you want to use new Date() to ensure format is uniform. Try the following:

let today = new Date ();
let currentYear = today . getFullYear(); //number
let currentMonth = today . getMonth() //number
let currentDate = today . getDate(); //number

let formattedDate = new Date (currentYear, currentMonth, currentDate)
console . log(formattedDate, ‘formatted date’ )

if (itemData . startDate && itemData . endDate) {
//format start dates to matching format
let startDate = new Date (itemData . startDate)
let sYear = startDate . getFullYear() //number
let sMonth = startDate . getMonth() //number
let sDay = startDate . getDate() //number
let sFormatDate = new Date (sYear, sMonth, sDay)

//format end dates t matching format 
let endDate  =  new  Date (itemData . endDate) 
let eYear  =  startDate . getFullYear()  //number 
let eMonth  =  startDate . getMonth()  //number 
let eDay  =  startDate . getDate()  //number 
let eFormatDate  =  new  Date (eYear, eMonth, eDay) 


if  ( formattedDate >= sFormatDate && formattedDate <= eFormatDate ) {     		    
$item( '#opennowtext' ) . show();  
 }

}

You can also use wix data api to query, then set the data in a repeater. You would use gt and le as parameter for the query. This would then only populate available items o your page.

3

Wow, this code has worked perfectly as far as I can tell. I had made a little progress on my own but my result was the opennowtext was showing on all sites but the site that was actually open. My code threory seemed sound to me but it was doing the opposite.

This is what I got to, I suppose I need not go any further now thanks to you.

        var today = new Date();
        console.log(today);

        var result = today.getTime();
        console.log(result);

        var start = itemData.startDate.getTime()
        var finish = itemData.finishDate.getTime()

        if (start >= today && today <= finish)
            $item('#opennowtext').show();

Your help is very much appreciated sir.

4

Best of luck!

5

Could my code of worked with the right tweaks? I am just interested as i’m still learning.

6

Looking at your latest attempt, it will not return the result you’re looking for either. If you’re curious as to why, run a few test in the console and see them log. More specifically console.log(itemData.startDate, itemData.endDate, ‘item dates’). You’ll notice that the dates format are in TMZ and includes the time. The time extension will throw off strict matches (===). When we are mapping dates, we first need to build the format we are looking for. The new Date() call has multiple selections, you can learn more about them here . (No need to mess with prototypes with wix as your CMS :slight_smile: )

7

I have found a slight issue with the code you kindly supplied.

When todays date passes the open date the open here dissapears even though the site end date hasn’t passed.

8

Yeah the if statement reads a little off– try this:

if ( formattedDate >= sFormatDate && formattedDate <= eFormatDate ) {
$item( ‘#opennowtext’ ) . show();
}

9

Thanks, I actually managed to edit by trial and error and it matches your revision. Thanks for that though.