Date filter for calendar view with ability of picking a date

Hi, let say we have a table with a date column, and I have attached it to a calendar view. If I add a filtering ability, it enumerates the date column and filter based on simple matching. Is there any way we can have a smarter filter like BETWEEN a date D1 and D2? Or something that pops up a calendar (like date picker) and lets the user select a range? Bcoz now is really funny, If in my table I have 100 rows and each of em with different dates, then when user tap on filter they will see all those 100 dates, and they have to select it one by one.

1 Like

Here is one way you could do this:

  • Create 2 User Specific columns. Call one ‘Start Date’ and the other ‘End Date’
  • Add 2 Date input components to your screen. One should write to the Start Date column, and the other should write to the End Date column.
  • Now you can create a visibility condition like this:

3 Likes

Beautiful :star_struck: so basically you mean I make my own filter UI, not use the built in filter ability. Right? Nice :+1:

Yes.
There is one downside with that solution.
Let’s assume you’re using it to filter an inline list… the downside is that zero records will be displayed until the user has entered both a start date AND an end date. Which could be a little confusing.

A way around this would be to duplicate your inline list, remove the filtering on the second list (so it always displays all records), and then use visibility conditions to display either the first or second list based on the state of the date input components. ie:

  • if both are not empty, show the first (filtered) list. Otherwise show the second list.
3 Likes

Fantastic! I did it, including your suggestion about visibility condition. I hope they add new date picker components, such as DateRange picker, anyway Thanks @Darren_Murphy for the hint.

1 Like

Sorry, I missed this the first time.
This already exists. It’s called an Event Picker.

Awesome, many thx, I guess this week I will go through entire of documentation :grinning_face_with_smiling_eyes: