Creating a Dynamic Menu Based on Date...

Ask the community
,
1

Hello ,

I am trying to create a dynamic item(s) menu that is based on the date in which it is accessed (menu items change daily). As well as to allow a person to use the calendar to see future menu items…

I have tried multiple suggestions that I found from previous post and they seem to learn towards a javascript that does not seem to work for me. I really do not know what to do in term of the proper approach…

My hope you use Wix Code to update the data based on a Start Date & End Date. Is this possible?

Thank you,
Colton

2

Hello Colton,

you can use the created date field or you can add a start date and end date fields to your data, then you can query the database based on them, after that you can do one of two options:

  • delete fields that don’t match this period

  • insert fields that match this period into a second data set, and connect the menu to the second database.
    know more about querying: WixDataQuery - Velo API Reference - Wix.com

Massa

3

I am still trying to work this out, but still haven’t landed on a solution. I am trying to get at least one page (without subpages) to display the current menu of that said date. Can anyone help?

Here is my current code:

// For full API documentation, including code examples, visit http://wix.to/94BuAAs

import wixData from 'wix-data';
$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("startDate", d)
      .or(
        wixData.filter().gt("endDate", d)
      )
    )
    .then( () => {
        console.log("Dataset is now filtered");
    } )
    .catch( (err) => {
      console.log(err);
    } );
  });
});

Thank you,
Colton

4

Hello I am still having an issue with this… not it just filtering out everything. I feel I am getting there…

// For full API documentation, including code examples, visit http://wix.to/94BuAAs

import wixData from 'wix-data';

$w.onReady(function () {

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

 var today = new Date();
 var dd = today.getDate();
 var mm = today.getMonth() + 1; //January is 0!
 var yyyy = today.getFullYear();
 var deadline = 'endDate';

 let d = new Date('startDate');

        d.setHours(0, 0, 0, 0);

        $w("#dataset1").setFilter(wixData.filter()
                .lt("startDate", dd)
                .or(
                    wixData.filter().gt('endDate', dd)
                )
            )
            .then(() => {
                console.log("Dataset is now filtered");
            })
            .catch((err) => {
                console.log(err);

            });
    });
});
5

Hello Colton,

Take a look at this article about manipulating dates: https://uggadugg.wixanswers.com/en/article/manipulating-dates

In general, it would be a good idea to console.log the start dates and end dates from the dataset to see in which format they are received, then after you do that, you have to format your date before you query the dataset with it to match the format provided from the initial console.log. Then you will set the filter with the new formatted date that you have.

Hope this helps,
Majd

6

Hello Majd,

I appreciate the information. However, my goal is to have my #dataset display menu items on the day that is listed in the #dataset. These dates are consist of a #startDate & a #endDate. I am starting to think it’s not possible.

There was a similar post here (https://www.wix.com/code/home/forum/community-discussion/filter-set-based-on-date-comparison)

Here is my current code:

// For full API documentation, including code examples, visit http://wix.to/94BuAAs

import wixData from 'wix-data';
$w.onReady(function () {
    $w("#dataset1").onReady(() => {
        console.log("The dataset is ready");

 let d = new Date(98, 1); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)

        $w("#dataset1").setFilter(wixData.filter()
                .lt("startDate", d)
                .or(
                    wixData.filter().gt("endDate", d)
                )
            )
            .then(() => {
                console.log("Dataset is now filtered");
            })
            .catch((err) => {
                console.log(err);
            });
    });
});

—based off of @Yisrael (Wix) code.

Some images:

2208×1474 177 KB

2600×496 61.1 KB

Thank you,

7

bump

8

Hi Colton -

At first glance, you may want to:

– change the " .or " to " .and " (ensures that you are getting rows with dates within the start and end date range. )
– change the " .lt " to " .ge " (ensures that you are getting rows where today’s date is greater than or equal to the row’s start date)
– change the " .gt " to " .le " (ensures that you are getting rows where today’s date is less than or equal to the row’s end date)

As your code is written now, consider the row where the start and end date’s are both “11/06/2018”. If for example, today was “11/06/2018”, then consider the following questions:

– Is that row’s start date less than “11/06/2018”?
– Is that row’s end date greater than “11/06/2018”?

The answer to both these questions is “no”. And, since both conditions are false , then the row is not returned to the dataset. So, you may want to make sure that the start date is less than or equal to today’s date and , that the end date is greater than or equal to today’s date . Also, having just an “.or” instead of an “.and” means that even if only one of the conditions is true, then get the given row. But you want to make sure that today’s date is within the start and end date range.

Here’s the related API documentation:
https://www.wix.com/code/reference/wix-data.WixDataQuery.html#ge

Side note, I did not test to see if the date format/value is correct. But the above should be a good starting point.

Let me know if that helps.

Best,
Nick