Revamping the Date Picker control

Revamping standard out-of-the-box controls in Power Apps has always fascinated me. Recently, there was a discussion about which control needs the most revamping to make it more customizable. I had no hesitation in mentioning the date picker control.

This is how the date picker looks like:

Even if you change the theme of the app, the colors change based on the theme but there is no way for you to specify custom controls, unlike for other controls like buttons, drop downs, labels, combo boxes etc. With a changed theme, this is how the date picker looks like:

Given these restrictions, I wanted to come up with a date picker that, at the minimum, allows me to pick whatever color I want and allows me to adjust the size (width and height) of the control, along with font size, font type and font color.

Here are the steps I followed:

• I started off by using the standard calendar screen so I could pick the calendar from that screen rather than creating it from scratch. This is how the screen looks like:

  

• Once I copied over the controls relevant to the calendar on a new screen, a few properties had to be modified
• I then commented out any properties that were trying to fetch events from Outlook calendar, they were mainly related to the icons for previous month and next month
• After this, I made the following properties of the remaining controls dependent on variables (that I initiated on the OnVisible property of the screen or the OnStart property of the app):
  • Font color
  • Font size
  • Font type
  • Fill color
  • Border color
• I also added another label to display the selected date

All these properties will be better understood once you explore the component. Yes, that's correct, this is now a component that can be resused! Once I was happy with how the control behaved, I set out to turn this into a component. These are the properties of the date picker component:

• Input properties
  • Main Color
  • Secondary Color
  • Header Font
  • Header Width
  • Header Height
  • Text Font
• Output properties
  • Selected Date

With this component, it is very easy to customize many properties of a date picker control, making it more in line with other controls. These are a few examples of different versions of date picker controls created using the component by simply specifying the 6 above mentioned properties:

Other than providing the ability to customize the look and feel of the date picker control, the biggest outcome for me was getting rid of the need to click OK to select a date. That being said, this is definitely not the end, in fact, it's just the beginning of revamping the date picker control. There's a lot more that can be done with this, here are a few examples:

• Allow a range of dates to be selected
• Show more than 1 month at a time
• Typing in a year instead of navigating one month at a time

Here is the link to this component which I have shared on the Power Apps community.

Have fun! Get addicted!