I have a database full of several events that will take place over a long weekend. Currently, my repeater is showing all of the events for every day. I’m trying to use a datepicker to filter the dataset so that the repeater only displays events on the selected date. I’m expecting this to update on change.
Here’s what I have so far. I’m having difficulty figuring out how to extract the date information from the database to match the format of the datepicker.
export function datePicker1_change_1(event, $w) {
//Add your code for this event here:
const pickerDate = $w(‘#datePicker1’).value;
Hi,
Do you get any results for this query?
in order to display the data in the repeater you should use “forEachItem” and set each element’s data for each event, check it out here .
Ahh, a little sleep helps see things fresh. I thought I checked this, but it appears time stamp portion of the datepicker and the dataset were not matching. So I guess the question then becomes, how can I get the above snippet of code to look at dates only (exclude the time stamp).
Update:
The code below works. However, it’s dependent upon time and I want it to filter just according to the dates(2018-04-08). Working Code:
export function datePicker1_change_1(event, $w) {
//Add your code for this event here:
const pickerDate = $w(‘#datePicker1’).value;
console.log(pickerDate); // “2018-04-08T06:00:00.000Z”
console.log($w(‘#dataset1’).getCurrentItem()); //{“_id”:“7e9ac858-f022-45b5-b3e9-6d91b44be080”,…,“meetupTime”:“2018-04-07T06:00:00.000Z”,…}
wixData.query(“CanyonCoordinator”)
.eq(“meetupTime”.toString(), pickerDate)
.find()
.then( (results) => {
$w(“#repeater1”).data = results.items;
});
} Experimental Code: The idea here is to convert it all into a string. When I append .toString() or .toLocaleString() (and others) to pickerDate it changes the format of the date field. So I tried to just manually reproduce the datePicker information to match “meetupTime” without modifying “meetupTime” further. The results have continued to return nothing.How can I get pickerDate and “meetupTime” into the same type and formats so that .eq will recognize them?
export function datePicker1_change_1(event, $w) {
//Add your code for this event here:
function pad(num, size) {
var s = num+“”;
while (s.length < size) s = “0” + s;
return s;
}
const pickerDay = $w(‘#datePicker1’).value.getDate().toLocaleString();
const pickerMonth = $w(‘#datePicker1’).value.getMonth()+1;
const pickerYear = $w(‘#datePicker1’).value.getFullYear().toString();
const pickerDate = pickerYear+“-”+pad(pickerMonth,2)+“-”+pad(pickerDay,2)+“T06:00:00.000Z”;
console.log(pickerDate); // 2018-01-05T06:00:00.000Z
// Note it does not return with quotations as it does in the working code
wixData.query(“CanyonCoordinator”)
.eq(“meetupTime”.toString(), pickerDate)
.find()
.then( (results) => {
$w(“#repeater1”).data = results.items;
});
}
Alright, got it working. Using new Date() and not just Date() helped format the datepicker text properly which allowed me to use ge and le to set the target day as a range.
Below is the working code for filtering a repeater by datepicker date:
export function datePicker1_change_1(event, $w) {
//Add your code for this event here:
function pad(num, size) {
var s = num+“”;
while (s.length < size) s = “0” + s;
return s;
}
Hi Chase,
Just to be sure, is it working for you now?
Moreover, I wrote an example of filtering a repeater information here which can be useful for you.
I am however struggling to modify to suit my needs ( story of my coding journey so far ).
I need to filter my repeater using a start and an end date - instead of just one day.
As a novice any advice you could offer would be a great help to me.
I’ve been trying anything and everything for a few days with no success.
Could you point me in the right direction?
What do I need to work on - to better understand and manipulate your code.
Thanks in advance.
p.s
if you can help me on this I will donate $50 to the charity of your choice in your name as a thank you.
Update managed to get this working just after I posted typical !!!
code below just in case anyone wants to filter a repeater by a date range - if it can be improved please let me know chasingadventure29 thanks again for the original post.
I added 2 date pickers to the page and a repeater fed from a collection named contact04
// changed event to the second date picker
export function datePicker2_change(event,) {
function pad(num, size) {
var s = num+“”; while (s.length < size) s = “0” + s; return s;
}
//added more const to account for second date picker re named as pickerDay2
const pickerDay2 = $w(‘#datePicker2’).value.getDate().toLocaleString();
const pickerMonth2 = $w(‘#datePicker2’).value.getMonth()+1;
const pickerYear2 = $w(‘#datePicker2’).value.getFullYear().toString();
const pickerDateMax = new Date(pickerYear2+“-”+pad(pickerMonth2,2)+“-”+pad(pickerDay2,2)+“T23:59:59.999Z”);
//Prints the results of the above so we can use it to filter the data displayed in the repeater
console.log(pickerDateMin, “end date”);
console.log(pickerDateMax, “end date”);
//filters the result and displays on your repeater
// change contact04 to your collection ID
wixData.query(“contact04”)
.ge(“submissionTime”, pickerDateMin) //“2018-04-08T05:00:00.000Z”
.le(“submissionTime”, pickerDateMax)
.find()
.then( (results) => {
//replace leadsReap with your Repeater name form properties
$w(“#leadsRep”).data = results.items;
});
}
).