Display different a image from a DB based on date range

Discussion Ask a question
,
1

Hello - I want to load up a database with some images then display just one on a page, depending on a date range. i.e. If it is between 5/9/18 and 5/11/18 then display picture ‘A’ from database X; between 5/12/18 and 5/15/18 display picture ‘B’ from database X, etc. Does anyone have some sample code?

Thanks much.

2

Hi Simon,

In the collection, you’ll need to insert the image and two fields for minimum and maximum dates.
Then use wix data query with .gt(min date) & .lt(max date)
See how to use .gt and .lt below:

for example:

let selectedDate = $w('#dateSelector').value; //gets the value from the dropdown

wixData.query("myCollection")
  .lt("maxDate", selectedDate)
  .gt("minDate", selectedDate)
  .find().then(res => {
      $w('#image').src = res.items[0].image; //presuming the image is stored in a field named 'image';
  })
3

Thanks, Ido! Appreciate the response. So if I want to automatically use the actual current date, rather than select from a drop down, would it look like this?

let localDate = LocalDate.now();
wixData.query(“myCollection”)
.lt(“maxDate”, LocalDate)
.gt(“minDate”, LocalDate)
.find().then(res => {
$w(‘#image’).src = res.items[0].image; //presuming the image is stored in a field named ‘image’;
})

4

Hi Simon,

You’re welcome!
Try this:

let localDate = new Date();
5

Thanks again Ido! I’m still doing something wrong
a) Does that code have to be preceded (inside) : $w.onReady(function () {
b) Do i have to connect the (starter) image to the database?

It does load an image from the database right now (when a starter image is connected to a collection) but it’s (normally not the right one, though, based on date/time)

Thanks much, again!

6

Hi Simon,

If the code should run on page load, add it inside the onReady event.

The placeholder image does not need to be connected since we are updating it by code.

7

Thanks for the clarification! OK - So I have this code:

import wixData from ‘wix-data’;
$w.onReady(function () {
let localDate = new Date();
wixData.query(‘schedules’)
.gt(‘minDate’, localDate)
.lt(‘maxDate’, localDate)
.find().then(results => {
$w(‘#image9’).src = results.items[0].image;
});
});

but I’m getting the error message in the developer console:

Uncaught (in promise) TypeError: Cannot read property ‘image’ of undefined

Should I be using the database date/time option? Maybe it’s issue of normalizing between what “new Date()” uses and what the database date format is?

854×312 29.8 KB

8

My fault, I got the .lt and .gt commands wrong:

$w.onReady(function () {
 let localDate = new Date();
    wixData.query('datetoimage')
        .lt('minDate', localDate)
        .gt('maxDate', localDate)
        .find().then(results => {
            console.log(results)
            $w('#image1').src = results.items[0].image;
        });
});
9

Heya, Ido – I really appreciate the ongoing hand-holding. I think you were right the first time, though: It has to be less than (lt) the maxDate and greater than (gt) the minDate. I’ve tried it both ways, though, and (thanks to your addition of the console debug line) I get the following:

{“items”:[],“length”:0,“totalCount”:0,“query”:{“invalidArguments”:[],“filterTree”:{“$and”:[{“minDate”:{“$lt”:“2018-05-17T15:26:48.758Z”}},{“maxDate”:{“$gt”:“2018-05-17T15:26:48.758Z”}}]},“provider”:{},“collectionName”:“schedules”,“limitNumber”:50,“included”:[]}}

This looks like its looking for something less than the localdate and greater than the localdate – Which would be everything. But maybe it’s just me! :slight_smile:

I was thinking that an .or() argument might be required - I added it in-between .lt and .gt and all the errors disappear, but it still doesn’t work. Does the above debug line give you any clues?

Thanks again, man.

10

Hi Simon,
you’re welcome!

I added the following code to the page:

import wixData from 'wix-data';

$w.onReady(function () {
 let localDate = new Date();
    wixData.query('datetoimage')
        .lt('minDate', localDate)
        .gt('maxDate', localDate)
        .find().then(results => {
            console.log(results)
            $w('#image1').src = results.items[0].image;
        });
});

The collection is configured as follows:

845×213 21.4 KB

According to this logic, I should see a King when I load the page, and it indeed loads as expected.
If you check it after May 24th, it should return the Pawn.

You can check it out here
https://idoi240.wixsite.com/cookie/dasd

Compare my config to yours and I’m sure you will find the cause :slight_smile:

1 Like
11

Awesome! This works! Thanks, Ido! On the last iteration, I needed to ignore the alert that says I needed a semicolon on the console line. Really appreciate you putting the sample page together, above.

1 Like
12

Hi, I am trying to implement the same functionality with a difference that I am trying to match the date field with today’s date. However, I am getting the " Cannot read properties of undefined (reading ‘image’)" anyone able to get around this error message?

13

Please add your own issue into a new post instead of bumping up an old post. Explain what you are trying to do, what works, and what doesn’t. Also, add any code in a code block as stated in the Forum Guidelines .

This is an old post and is being closed.