Filter data using date range picker

[Priya_Sharma]

Hello everyone,

I need to filter data using date range picker so the user can view data between start date and end date.

I'm using between condition but don't know how to use start date and end date from date range picker.

[Hyperbytes]

Old video but may help.

Using the date range picker

This 3m 30s video continues from the (Using the date picker to select a single date) video and demonstrates the date range picker. [date range picker]

[brad]

Select your date picker and then go to Dynamic Attributes -> Date Picker where you can se your min and max dates.

[Priya_Sharma]

Thanks for the quick reply @Hyperbytes & @brad. It was quick and very easy to apply filter. I don’t know how I missed it. Anyway for other users I’m posting the quick guide here. probably it’s my 1st tutorial I’m posting in community.

Q. Suppose, We’ve a table of 1M+ users. There is a date field in which we store the date of entry (account creation date).

How can we load data of users created from 01-Aug-2022 to 22-Nov-2024

Note: this is not full guide, it’s only for those who know how to add filters in query.

Answer:

1. Create start and end variables in $_GET

2. In Conditions tab > create a filter condition like this. (select account creation date)

3. Now add a date range picker in front-end UI.

<input id="dateRange" name="dateRange" is="dmx-date-range-picker" class="form-control form-control-sm w-25 me-2" placeholder="Select date range" dmx-bind:maxdate="varDate.datetime" dmx-bind:mindate="varDate.datetime.addYears(-1)" format="MMM Do, YYYY" opens="left" autoapply="true">

4. Now you have to select start & end date from date range picker input.

5. Select these

[RodrigoBarata]

Hello,

I've done it like you posted here and it worked for me. The only problem is that i only want that date range filter when user chooses it.

In my case i have a list of notes, i want to display all the notes. Then the user has a filter modal where he can filter the notes by the date range picker. But when the picker is empty it shows all notes.

Can someody help me with that?

Thanks

[Priya_Sharma]

Select condition $_GET.your_date_range_filter.

So, when there will be any value in that field, it will filter otherwise it’ll show all data without filter.

Note: use this filter in OR condition.

[RodrigoBarata]

That worked. Thanks mate!

[RodrigoBarata]

Sorry to bother you again.

I've tried to add a condition.

When it's like you explained it works fine:

When i try to add a text filter it doesn't work... What am i doing wrong?

[Teodor]

Put these in two separate condition groups, not in one. Then you can have a condition for each of the groups.

[RodrigoBarata]

Hello Teodor,

I've separated both and the date still doesn't work. Only the text filter works.

[Teodor]

No, they are still nested in the same group.
You need two separate groups:

[Priya_Sharma]

This may help.

1st click on Add Group twice. Two group will be created. Then create 2 separate filters in 2 separate groups.

See….

[RodrigoBarata]

Thanks! Have a nice day!

[RodrigoBarata]

Thanks, it helped a lot! Have a nice day!