Power Apps Filter With Date Picker

This Power Apps tutorial will go over a few examples of how to filter the date picker control in Power Apps based on certain requirements.

I had a requirement to filter the date picker control within the Power Apps while working with the Power Apps canvas app.

In addition, we will go over how to filter the Power Apps date picker control using the items listed below.

How to filter a gallery using Power Apps date picker?
How to filter a record with Power Apps date range?
How to filter a Power Apps gallery using multiple date picker controls?
How to filter Power Apps records with today’s date?
How to sort and filter data via PowerApps date picker?

Table of Contents

Power Apps date picker filter gallery

Here, we will see how to filter a Power Apps gallery using a date picker control. That means, when the user selects any date from the date picker control, the data will filter inside the gallery as per the selected date.

To work with this requirement, we have prepared a SharePoint list named Projects having a title column and a date column with some random data shown below:

On the Power Apps screen, let’s build a Power Apps gallery using the above SharePoint list.

Add a Power Apps date picker control to the screen, that will allows the user to select the date.

Insert the expression below into the gallery’s Items property to filter the gallery based on the date selected from the Power Apps date picker control.

Items = Filter(Projects, StartDate = StartDate_Picker.SelectedDate)

Where,

Projects: The name of the SharePoint data source
StartDate: The name of the SharePoint date column name
StartDate_Picker: The name of the Power Apps date picker control

Power Apps Filter Gallery With DatePicker

That’s all! Save and publish the app now. Check out the app and choose a date from the date picker control. The filter data will be displayed in the Power Apps gallery, as shown below. (Ex- 11/1/2022)

This is how to filter a gallery with PowerApps date picker control.

Power Apps filter with date range

In this section, we’ll look at how to filter a Power Apps gallery by date range. That is when a user selects a specific date range from both of the power apps’ date pickers, the filtered data will be displayed in the gallery.

To work with this scenario, we are going to use the above SharePoint list, and the following steps are:

On the above Power Apps screen, let’s add another date picker. So that user can select a project’s delivery date.

As per the above app, when the user selects a project’s start date and delivery date from the respective date pickers, the data will filter based on the selected dates and display within the Power Apps gallery.

Next, insert the below filter query within the Power Apps vertical gallery’s Items property.

Items = If(
    IsBlank(Delivery_DatePicker.SelectedDate),
    If(
        IsBlank(Start_DatePicker),
        Projects,
        Filter(
            Projects,
            StartDate >= Start_DatePicker.SelectedDate
        )
    ),
    If(
        IsBlank(Start_DatePicker),
        Filter(
            Projects,
            StartDate <= Delivery_DatePicker.SelectedDate
        ),
        Filter(
            Projects,
            StartDate <= Delivery_DatePicker.SelectedDate,
            StartDate >= Start_DatePicker.SelectedDate
        )
    )
)

Where,

Projects: The name of the SharePoint list
Start_DatePicker, Delivery_DatePicker: The name of the Power Apps date picker controls to select the dates for Project’s start date and delivery date respectively.
StartDate: The name of the SharePoint date column.

Let’s save and preview the app. Select the start date and delivery date from both Power Apps date picker controls. (Ex: 11/1/2022 – 11/8/2022)

Once we select the dates, the data will be filtered based on the date range and will display on the Power Apps gallery.

Power Apps Filter A Gallery By Date Range

This is how to filter a Power Apps gallery by date range.

Check Out: How to disable Power Apps date picker

How to filter a Power Apps gallery using multiple date picker controls?

We’ll see how to filter data using multiple Power Apps date pickers in this example. That is, we will create a gallery that will display the data from a specific SharePoint list. Place multiple date pickers to allow users to choose the dates for themselves. The data in the Power Apps gallery filters when the user selects the dates.

To work with this requirement, we are going to use the above Power Apps gallery that displays the data from the “Project” SharePoint list, and the following steps are:

As we have already prepared the vertical gallery on the Power Apps screen, let’s add two date picker controls.

PowerApps date picker filter multiple date

To filter the Power Apps gallery based on the multiple date pickers, insert the below expression on the gallery’s Items property.

Items = Filter (Projects,StartDate >= Start_DatePicker.SelectedDate, StartDate <= Delivery_DatePicker.SelectedDate)

Where,

Projects: The name of the SharePoint list
StartDate: The name of the SharePoint date column
Start_DatePicker, Delivery_DatePicker: The name of both date pickers to select the date for the start and delivery date.

Power Apps filter gallery with two DatePickers

Let’s preview the app and select dates from both Power Apps’ date picker controls. We can see that it will filter the data and only display those that fall between the selected dates.

Filter gallery with multiple Power Apps DatePickers

This is how to filter a gallery with multiple Power Apps Date Pickers.

Have a look: How to Patch Power Apps Date Picker

Power Apps filter with date picker today

Here, we will see how to filter the Power Apps gallery by today’s date. In other words, the data will automatically filter and display only current records within the Power Apps gallery.

To work with this requirement, let’s take the above example of the Power Apps gallery and the following steps are:

On the Power Apps screen, add a date picker control and place that beside the Power Apps gallery. By default, the date picker will display today’s date.

Power Apps filter with date picker today

To filter the data within the Power Apps gallery by today’s date, insert the below expression on the gallery’s Items property.

Items = Filter(Projects, StartDate >= Today(), StartDate < DateAdd(Today(),1,Days))

Where,

Projects: The name of the SharePoint list
StartDate: The name of the SharePoint date column

Once the formula is applied to the gallery, we can see that it will display the filtered data based on today’s date.

Since the current date is 11/14/2022, it only displays data that started on that date.

This is how to filter a record based on today’s date within the Power Apps.

Check Post: [Solved]Can’t convert this data type. Power Apps can’t convert this Date to a Boolean

How to sort and filter data via PowerApps date picker?

In this section, we will see how to sort and filter a record by using the Power Apps date picker control.

That is when a user selects a date from the Power Apps date picker control, the data in the Power Apps gallery is filtered and sorted in ascending or descending order.

To work with this scenario, we will use the above Power Apps gallery and the following steps are:

On the Power Apps screen, add a date picker control.
Insert the below expression on the gallery’s Items property to filter and sort the data.

Items = Sort(Filter(Projects, StartDate = Start_DatePicker.SelectedDate), Title, Ascending)

Where

Projects: The name of the SharePoint list
StartDate: The SharePoint date column
Start_DatePicker: The name of the Power Apps date picker control

As per the above expression, the filtered data will appear in ascending order.

Let’s preview the app and select a start date from the date picker control. (ex: 11/01/2022) We can see the filtered data will appear in ascending order shown below:

This is how to sort and filter a record via Power Apps date picker control.

Furthermore, you may like some more Power Apps tutorials:

Power Apps Collection [Complete Guide]
Power Apps Collection Using SharePoint List
Power Apps Collection Using Excel [Complete Guide]
How to Reset Power Apps Date Picker
Create PowerApps Date filter
Power Apps Checkbox control within Gallery
How to use Power Apps Check Box Control

Conclusion

From this Powe Apps Tutorial, we discussed how to filter a record via Power Apps date picker control based on different scenarios such as:

Power Apps date picker filter gallery
Power Apps filter with date range
PowerApps date picker filters multiple dates
Power Apps filter with date picker today
PowerApps date picker sort filter

Bijay Kumar

After working for more than 15 years in Microsoft technologies like SharePoint, Office 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (9 times). I have also worked in companies like HP, TCS, KPIT, etc.

Hi Bijay. I’ve got so much out of your content and I’m truly grateful for your help.
I wonder if I could pose a question?
I’m building a booking/reservation system and I’ve been struggling with filtering two drop down controls using a date picker control.
Each drop down is connected to a separate SharePoint list and the ‘DatePicker’ control is ‘patching’ to a 3rd list that contains all of the bookings/reservations of the items in the other two lists.
I need to filter those drop down list items based on whether or not an item has already been made for the list item on the [DateSelected] value of the ‘DatePicker’ control.
Here’s what I’ve got so far but isn’t working due to the error below…

Filter(Desks,Not(‘Title’ in Filter(Desk_Booking,Reservation_Date = DatePicker.SelectedDate).Desk))

…”Power Apps can’t convert this Text to a Record”.

That error is specific to the ‘Title’ value in the first Filter function.

Title refers to the title column in the ‘Desks’ list and .Desk refers to the use of that title column value in the main ‘Desk_Booking’ list.
I’ll need to repeat this logic for the 2nd of the two drop downs so that both selections are constrained by the available resources for the selected date.

Can you see my mistake?
N03L.