Filtering Repeater by Date Range


#1

Hello,
I am a beginner but already working with some complex functionality, as I am trying to filter a repeater list by date range.
I have read through some similar posts but still cannot figure it out.

I am pretty sure it is not working currently as the item.combodate in my repeater is not a number string and I need to convert it somehow, so Axure knows which values are larger or smaller than the dates selected. this is where I am stuck.

DateRangeFilter.rp (157.5 KB)


#2

Hi!

This is a fairly advanced thing you want to do, but it’s not quite rocket science. The thing you need to know that a date can be stored in a variety of formats, and one of them is literally the number of milliseconds that have transpired since January 1, 1970. This is a convenient format, because suddenly we have a number! So we can asks for dates greater than a particular number, less than a particular number, or between two numbers, assuming that we are always converting dates to this numeric format. The date function valueOf() parses a date in just about any format and converts the date into milliseconds. There are then other date functions we can use to convert the date from milliseconds into any date format you might want.

The strategy here is, when adding a date to the repeater, to store it in milliseconds. We will use date functions in the Item Loaded handler to display this column in a more readable form.

I’m attaching a file with a bunch of instructions, but I strongly recommend that you read this Medium article on repeaters, because in addition to helping you understand the repeater in general, it takes a dive into expressions as well as using date functions.

Preview

Sample file: store date natively in repeater.rp (71.0 KB)


How to create a date object from Unix Epoch or a given date?
#3

@pstef, When I saw your post my first thought was that you’re right–you need a number for your dates. My second thought was, “Oh, you need help from @josephxbrick on this one.” :smile: --He’s the “date and function king” here. The standard “date number” in programming is “Unix time” or the “elapsed seconds” since Jan 1, 1970. Getting, setting, and converting between this number and human-readable date formats can be tricky. The file he posted helps explain this well, but I notice it is an RP9 format and you’re using RP8. I should be able to convert it to RP8 and repost it.

In the meantime, my third thought was that for your needs, you could probably use any number to represent your dates, and since your repeater is prefilled with dates, it would be cumbersome to get the elapsed time value for each of your rows. You could simply use something which is both a single number and human-readable, for example, 20200701 for “1 July, 2020”. Now, there are some flaws with this–associated with some months having 31, 30, 28 or 29 days, etc.–but this shouldn’t impact your needs nor ability to convey the concept in your prototype.

So, consider this updated file where I replicated your “Home” and “Page 1” pages to “Events” and “Page 2”. The only change to your repeater is the values in your ComboDate column. I added some test buttons to set and remove a filter. (I also added an OnPageLoad with two cases to handle your default non-numeric values for the global variables–I could have just changed the default values you set, but this demonstrates another way to handle it.)
On “Page 2” I show a better and easier way to set up your filter buttons with two states (selected or unselected) so there is less duplication and the interaction code is easier to access. You can investigate the styling for the buttons and notice they are all part of a “selection group” so that only one at a time may be selected. I kept your logic though, and it works–the main difference is the values used for the global variables. I also set up each button with an OnLoad event to check if it is the one to be selected when the page loads–so that changing filters works more seamlessly. (Consider also creating the content on your “Page 1” as a dynamic panel on the “Home” page instead of a separate page.)

DateRangeFilter.rp (261.7 KB)


#4

RP8 version of joseph’s file: store date natively in repeater RP8.rp (130.4 KB)


#5

Thank you @josephxbrick and @mbc66 so much! Super helpful and great explanations!