Date range picker not including items which fall on the selected start date (Velo)

Ask the community
, ,
1

(Wix Editor)

Hey there! I have a page displaying items from a dynamic collection in a repeater, which I’d like users to be able to filter by date range. The items often have multiple dates - defined in three separate fields in the cms.

I’ve got the start and end date pickers and button set up, and the function seems to be working ok, however I cannot get the filter to include items that fall on the selected start date. For example, if I choose 13 February 2024 as the start date, and 15 February 2024 as the end date, it’s showing me results which are on the 14th and 15th February, but not the 13th.

Here are some of the code variations I’ve tried:

import wixData from ‘wix-data’;
import wixWindow from ‘wix-window’;

$w.onReady(function () {
// Set the onClick event handler for the search button
$w(“#dateSearchButton”).onClick(() => {
// Get the start and end dates from the date picker elements
const startDate = $w(“#startDatePicker”).value;
const endDate = $w(“#endDatePicker”).value;

    // Log the values for debugging
    console.log("Start Date:", startDate);
    console.log("End Date:", endDate);

    // Filter the dynamic collection based on date range
    filterContent(startDate, endDate);
});

});

function filterContent(startDate, endDate) {
// Convert date strings to Date objects
const startDateObject = new Date(startDate);
const endDateObject = new Date(endDate);

// Convert date objects to ISO format
const isoStartDate = startDateObject.toISOString();
const isoEndDate = endDateObject.toISOString();

// Get the Courses dynamic collection
wixData.query("Courses")
    .between("performance1Date", isoStartDate, isoEndDate)
    .or(
        wixData.query("Courses").between("performance1Date1", isoStartDate, isoEndDate)
    )
    .or(
        wixData.query("Courses").ge("performance1Date11", isoStartDate).lt("performance1Date11", isoEndDate)
    )
    .find()
    .then((results) => {
        // Update the repeater with the filtered data
        $w("#apovListRepeater").data = results.items;
    })
    .catch((error) => {
        console.error("Error filtering content: ", error);
    });

}

2. ( filtering conditions for the “Courses” dynamic collection are simplified using the ge (greater than or equal), le (less than or equal), and lt (less than) methods)

import wixData from ‘wix-data’;
import wixWindow from ‘wix-window’;

$w.onReady(function () {
// Set the onClick event handler for the search button
$w(“#dateSearchButton”).onClick(() => {
// Get the start and end dates from the date picker elements
const startDate = $w(“#startDatePicker”).value;
const endDate = $w(“#endDatePicker”).value;

    // Log the values for debugging
    console.log("Start Date:", startDate);
    console.log("End Date:", endDate);

    // Filter the dynamic collection based on date range
    filterContent(startDate, endDate);
});

});

function filterContent(startDate, endDate) {
// Convert date strings to Date objects
const startDateObject = new Date(startDate);
const endDateObject = new Date(endDate);

// Convert date objects to ISO format
const isoStartDate = startDateObject.toISOString();
const isoEndDate = endDateObject.toISOString();

// Get the Courses dynamic collection
wixData.query("Courses")
    .ge("performance1Date", isoStartDate)
    .le("performance1Date", isoEndDate)
    .or(
        wixData.query("Courses").ge("performance1Date1", isoStartDate)
        .le("performance1Date1", isoEndDate)
    )
    .or(
        wixData.query("Courses").ge("performance1Date11", isoStartDate)
        .lt("performance1Date11", isoEndDate)
    )
    .find()
    .then((results) => {
        // Update the repeater with the filtered data
        $w("#apovListRepeater").data = results.items;
    })
    .catch((error) => {
        console.error("Error filtering content: ", error);
    });

}

3. (this one gives me the ‘Expected 1 arguments, but got 2.’ error on the second line of each ‘or’)

import wixData from ‘wix-data’;

$w.onReady(function () {
// Set the onClick event handler for the search button
$w(“#dateSearchButton”).onClick(() => {
// Get the start and end dates from the date picker elements
const startDate = $w(“#startDatePicker”).value;
const endDate = $w(“#endDatePicker”).value;

    // Log the values for debugging
    console.log("Start Date:", startDate);
    console.log("End Date:", endDate);

    // Filter the dynamic collection based on date range
    filterContent(startDate, endDate);
});

});

function filterContent(startDate, endDate) {
// Convert date strings to Date objects
const startDateObject = new Date(startDate);
const endDateObject = new Date(endDate);

// Convert date objects to ISO format
const isoStartDate = startDateObject.toISOString();
const isoEndDate = endDateObject.toISOString();

// Get the Courses dynamic collection
wixData.query("Courses")
    .or(
        wixData.query("Courses").ge("performance1Date", isoStartDate).le("performance1Date", isoEndDate),
        wixData.query("Courses").eq("performance1Date", isoStartDate) // Include items with the specified start date for "performance1Date"
    )
    .or(
        wixData.query("Courses").ge("performance1Date1", isoStartDate).le("performance1Date1", isoEndDate),
        wixData.query("Courses").eq("performance1Date1", isoStartDate) // Include items with the specified start date for "performance1Date1"
    )
    .or(
        wixData.query("Courses").ge("performance1Date11", isoStartDate).lt("performance1Date11", isoEndDate)
    )
    .find()
    .then((results) => {
        // Update the repeater with the filtered data
        $w("#apovListRepeater").data = results.items;
    })
    .catch((error) => {
        console.error("Error filtering content: ", error);
    });

}

4. this one gives me the error Expected 3 arguments, but got 4. on lines: { “startDateInclusive”: true, “endDateInclusive”: true })

import wixData from ‘wix-data’;
import wixWindow from ‘wix-window’;

$w.onReady(function () {
// Set the onClick event handler for the search button
$w(“#dateSearchButton”).onClick(() => {
// Get the start and end dates from the date picker elements
const startDate = $w(“#startDatePicker”).value;
const endDate = $w(“#endDatePicker”).value;

    // Log the values for debugging
    console.log("Start Date:", startDate);
    console.log("End Date:", endDate);

    // Filter the dynamic collection based on date range
    filterContent(startDate, endDate);
});

});

function filterContent(startDate, endDate) {
// Convert date strings to Date objects
const startDateObject = new Date(startDate);
const endDateObject = new Date(endDate);

// Convert date objects to ISO format
const isoStartDate = startDateObject.toISOString();
const isoEndDate = endDateObject.toISOString();

// Get the Courses dynamic collection
wixData.query("Courses")
    .between("performance1Date", isoStartDate, isoEndDate, { "startDateInclusive": true, "endDateInclusive": true })
    .or(
        wixData.query("Courses").between("performance1Date1", isoStartDate, isoEndDate, { "startDateInclusive": true, "endDateInclusive": true })
    )
    .or(
        wixData.query("Courses").ge("performance1Date11", isoStartDate).lt("performance1Date11", isoEndDate)
    )
    .or(
        wixData.query("Courses").eq("performance1Date11", isoStartDate) // Include items with the specified start date for "performance1Date11"
    )
    .find()
    .then((results) => {
        // Update the repeater with the filtered data
        $w("#apovListRepeater").data = results.items;
    })
    .catch((error) => {
        console.error("Error filtering content: ", error);
    });

}

and finally, 5. which returns no errors, seems to filter fine, but still doesn’t include items on the start date of the range.

import wixData from ‘wix-data’;
import wixWindow from ‘wix-window’;

$w.onReady(function () {
// Set the onClick event handler for the search button
$w(“#dateSearchButton”).onClick(() => {
// Get the start and end dates from the date picker elements
const startDate = $w(“#startDatePicker”).value;
const endDate = $w(“#endDatePicker”).value;

    // Log the values for debugging
    console.log("Start Date:", startDate);
    console.log("End Date:", endDate);

    // Filter the dynamic collection based on date range
    filterContent(startDate, endDate);
});

});

function filterContent(startDate, endDate) {
// Convert date strings to Date objects
const startDateObject = new Date(startDate);
const endDateObject = new Date(endDate);

// Convert date objects to ISO format
const isoStartDate = startDateObject.toISOString();
const isoEndDate = endDateObject.toISOString();

// Initialize an empty array to store results
let allResults = [];

// Get the Courses dynamic collection for performance1Date
wixData.query("Courses")
    .ge("performance1Date", isoStartDate)
    .lt("performance1Date", isoEndDate)
    .find()
    .then((results) => {
        // Add results to the array
        allResults = allResults.concat(results.items);

        // Get the Courses dynamic collection for performance1Date1
        return wixData.query("Courses")
            .ge("performance1Date1", isoStartDate)
            .lt("performance1Date1", isoEndDate)
            .find();
    })
    .then((results) => {
        // Add results to the array
        allResults = allResults.concat(results.items);

        // Get the Courses dynamic collection for performance1Date11
        return wixData.query("Courses")
            .ge("performance1Date11", isoStartDate)
            .lt("performance1Date11", isoEndDate)
            .find();
    })
    .then((results) => {
        // Add results to the array
        allResults = allResults.concat(results.items);

        // Update the repeater with the merged results
        $w("#apovListRepeater").data = allResults;
    })
    .catch((error) => {
        console.error("Error filtering content: ", error);
    });

}

Any help or advice would be so greatly appreciated, I feel like I’m losing my mind a bit here!
Thank you,
Laura

2

Hi!, this code should work for the filter you want to make.

import wixData from 'wix-data';

// Other code

$w('#filterButton').onClick(() => {
    filterContent();
})

function filterContent() {

    const realStartDate = $w("#startPicker").value;

    const endDateNotIncluded = $w("#endPicker").value;
    const endDateSeted = new Date(endDateNotIncluded);
    const realEndDate = new Date(endDateSeted.setDate(endDateSeted.getDate() + 1))

    const options = { suppressAuth: true }

    wixData.query("Courses")
        .between("performance1Date", realStartDate, realEndDate) // the between filter not include the last date.
        .find(options)
        .then((results) => {
            // Update the repeater with the filtered data
            $w("#apovListRepeater").data = results.items;
        })
        .catch((error) => {
            console.error("Error filtering content: ", error);
        });
}
3

Thanks so much for your reply! Unfortunately I couldn’t get that code to work, however did copy your logic of + 1 and instead applied a - 1 to the start date, on the original code, and it’s working perfectly now! Here’s the new code, for reference, and thanks again!

import wixWindow from ‘wix-window’;

$w.onReady(function () {
// Set the onClick event handler for the search button
$w(“#dateSearchButton”).onClick(() => {
// Get the start and end dates from the date picker elements
const startDate = $w(“#startDatePicker”).value;
const endDate = $w(“#endDatePicker”).value;

    // Convert date strings to Date objects
    const startDateObject = new Date(startDate);
    const endDateObject = new Date(endDate);

    // Adjust the start date to be one day earlier
    const startDateMinusOneDay = new Date(startDateObject);
    startDateMinusOneDay.setDate(startDateObject.getDate() - 1);

    // Log the values for debugging
    console.log("Start Date:", startDateMinusOneDay);
    console.log("End Date:", endDate);

    // Filter the dynamic collection based on date range and sort A-Z by 'performance1Date'
    filterContent(startDateMinusOneDay, endDateObject);
});

});

function filterContent(startDate, endDate) {
// Convert date objects to ISO format
const isoStartDate = startDate.toISOString();
const isoEndDate = endDate.toISOString();

// Get the Courses dynamic collection, filter, and sort A-Z
wixData.query("Courses")
    .between("performance1Date", isoStartDate, isoEndDate)
    .or(
        wixData.query("Courses").between("performance1Date1", isoStartDate, isoEndDate)
    )
    .or(
        wixData.query("Courses").ge("performance1Date11", isoStartDate).lt("performance1Date11", isoEndDate)
    )
    .ascending("performance1Date") // Sort A-Z by 'performance1Date'
    .find()
    .then((results) => {
        // Update the repeater with the filtered and sorted data
        $w("#apovListRepeater").data = results.items;
    })
    .catch((error) => {
        console.error("Error filtering and sorting content: ", error);
    });

}

1 Like