3 steps to implementing a better date picker in Power Apps

Posted By Pieter Veenstra on 17 May 2022 in Modern Workplace

One of the biggest annoyances of Canvas Apps in Power apps is the date picker. It just doesn’t feel right.

Some improvements needed

There are quite a few improvements that you might want to make to the date picker, that aren’t easily possible.

1. Having to press the OK button after you selected a date
2. Display the last days from the previous month or the first days of the next month
3. Branding the date picker

And so much more. In this post I will give some steps to create your own date picker.

In the below video you can see the out of the box date picker and then the adjusted date picker.

By no means is this custom date picker the perfect date picker, but this should give you a good starting point to create your own.

When I mentioned this date picker on twitter I noticed that quite a lot of people don’t like the current control.

Time to create my own now!

Creating your own date picker

There are a few steps to go through:

1. Create a date picker component
2. Communication between component and app
3. Hiding the original date picker

Create a date picker component

The first step is to create a component in your app. Then within your app create a calendar screen using the screen template and remove all the bits that you don’t need.

In my case I also set the background colour of the component as that is transparent by default. in my example I used green, but you can now have control over each element on your screen.

I don’t want the ok, button as it is in the original date picker. Or actually I want each date selection to work as an ok button.

Then within the Calendar screen template you will find that there are some calendar events that get displayed. For this purpose we are not interested in those, so simply remove them.

For the component to work, we will need some code that usually gets set when the Calendar screen becomes visible. As components don’t have this OnVisible property, I’m adding a timer to run this code. In the above screenshots I kept this time visible but you can hide that of course.

Communicating with the app

To communicate with the app, I created two properties. One input property and one output property

Now that the component is ready, we will need to have a look at the form inside the app

Hiding the original date picker control

In the form, we can now add an additional button. this button goes on top of the field in the form. To ensure that the button isn’t visible make it have a transparent background colour. please ensure that you also set the background for hover over.

now the button needs to have its OnSelect set to the following code:

Set(varPickDay, true); 
Reset(comDatePicker_1)

And the Component instant that we added to the app will need its visibility set as follows

Now you should have a date picker that will appear and disappear when a date is selected. However your form will not pick up the selected values yet.

But once we have set the DefaultDate value of the form control to pick up the DateSelectedOut property we are all good to go.

Continue Reading Pieter Veenstra’s Article on their blog

3 steps to implementing a better date picker in Power Apps

One of the biggest annoyances of Canvas Apps in Power apps is the date picker. It just doesn’t feel right. There are quite a few improvements that you might want to make to the date picker, that aren’t easily possible.

Blog Syndicated with Pieter Veenstra’s Permission

More About This Author

Pieter Veenstra

Array

Array

• Modern Workplace26 March 2024Receive the available storage within your SharePoint Online tenant
• Modern Workplace20 March 2024Options for Documenting Your Power Apps: Comments, Code, and Controls
• Modern Workplace18 March 20242 ways to duplicate SharePoint Lists to support your Power Apps
• Modern Workplace14 March 2024Update a Hyperlink Column in SharePoint with Power Automate