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?

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:

powerapps date picker filter gallery
powerapps date picker filter gallery
  • On the Power Apps screen, let’s build a Power Apps gallery using the above SharePoint list.
Power Apps date picker filter gallery
Power Apps date picker filter gallery
powerapps date picker to filter gallery
powerapps date picker to filter gallery
  • 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,

  1. Projects: The name of the SharePoint data source
  2. StartDate: The name of the SharePoint date column name
  3. StartDate_Picker: The name of the Power Apps date picker control
Power Apps Filter Gallery With DatePicker
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)

PowerApps Filter Gallery with DatePicker
PowerApps Filter Gallery with DatePicker

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

Also Read: How To Set Default Date in Power Apps Date Picker

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.
Power Apps filter with date range
Power Apps filter with date range

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,

  1. Projects: The name of the SharePoint list
  2. 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.
  3. StartDate: The name of the SharePoint date column.
PowerApps filter with date range
PowerApps filter with date range

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
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
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
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
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
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,

  1. Projects: The name of the SharePoint list
  2. 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.

PowerApps filter with date picker today
PowerApps filter with date picker today

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.

PowerApps date picker sort filter
PowerApps date picker sort filter

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:

PowerApps date picker sort and filter
PowerApps date picker sort and filter

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

Furthermore, you may like some more Power Apps tutorials:

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
>