It's easier than ever to build a Landing Page or a SaaS product without writing code.

Bubble.io is a visual programming tool that began in 2012. With its powerful features, you can build MVPs to validate your ideas or full-fledged SaaS products like AirBnB, Instagram, and Udemy.

However, the more advanced and complicated your App gets, the more problems you will likely encounter while making it work smoothly on a No-Code platform like Bubble.

In this tutorial, we will teach you how to filter a search or data by month and date on Bubble.io.

Filtering by date on Bubble.io

In this section, Lachlan Kirkwood, the author of many Bubble.io Clones, explains how you can filter a particular date from a given range of dates on Bubble.io.

Say, for example, you're building an app like AirBnB and you want to remove a property from a user's search that had already been booked within their desired date range.

You can do this in 10 simple steps:

1.  Bubble's main functions allow you to identify when a single date IS present within a given range of dates but doesn't have an option for when it IS NOT present within this given range.

2.  On the home page, we have two dates/time pickers that we are using to send through as custom parameters to the search results page.

3.  On the search results page, we then need to set a custom state to our repeating group, storing the dates from our page parameters as a range.

4.  Next, we will need to set the state of this repeating group when the search results page is loaded. We will be setting the date range as the two dates sent through our parameters.

5.  Next, we will add our usual constraints to the repeating group - filtering out a list of properties where the fields equal the values of our additional page parameters (excluding the dates).

6.  Now, we will need to add an additional filter to the list of properties that are displaying in the repeating group.

7.  Using an advanced constraint, we can filter out properties where the booked-dates (a date range we are storing in our database each time a trip is booked) overlaps with the dates set in our repeating groups state.

8.  We will then add a binary format as text, and choose when the text is ‘no’.

9.  Now, this WON’T display any properties that have booked dates overlapping with the user's query dates.

10.  That's it! We're done with filtering a search by dates. ✅

Filtering by month on Bubble.io

Shiku is developing a Budgeting App called Pesanote on Bubble.io and she shares No-Code tips and tricks every now and then.

In this section, she will teach you how to filter a search or data by month on Bubble.io in 7 simple steps:

1.  In the back-end, we create a new data field called 'Created-month' to store the month. This would be linked to every expense item a user creates. But this data field is actually a number, not a date.

2.  With the field set, we updated the backend workflows for when an expense item is created or edited.

So any time an expense is added, within the 'Create a new thing' workflow (in this case a new expense item), a number will be linked to that expense.

3.  To add it to the existing workflow, we selected 'set another field' and included 'created-month' (the new field we had created in the back-end).

Then we input the dynamic data 'Expense Date/Time's value' and then 'extract month'.

4.  This means that the app will take the month that the user selected for their expense date and format it as a number.

So Jan = 1, Feb = 2, and so on.

The 'extract' function evaluates the date to a number. That's why the 'created-month' field is a number.

5.  Going back to the front end, that number can now be used to filter data for a specific month.

E.g, under 'Recent Transactions', we can set the Data Source to: 'Search for expense items' and create a constraint that is 'Created-Month = Current date/time: extract month'.

6.  So this repeating group will show data that is relevant to the current month.

If a user creates an expense for April, that item's 'created-month' number is 4.

If the current date is April, the extracted number from that is 4.

Since those numbers match, the item is shown.

7. That's it! We've filtered out data by month on Bubble.io ✅

If you found this post useful, go ahead and subscribe to our Newsletter to receive insightful and actionable tips you could use for your next No-Code project!