Skip to main content

Notifications

Community site session details

Community site session details

Session Id :

Reusable Revamped Date Picker Control

PowerAddict Profile Picture Posted by PowerAddict 7,314 Most Valuable Professional

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.

 

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.

 

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.

 

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:

DatePickerRevamped.JPG

 

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 a link to my blog describing the approach in detail. Hopefully you all like this and start using this in place of the standard out of the box date picker control!

 

Thanks,

Hardit Bhatia

https://thepoweraddict.com

 

Categories:

Featured

Comments

  • PowerAddict Profile Picture PowerAddict 7,314 Most Valuable Professional
    Posted at
    Reusable Revamped Date Picker Control
    @R3dKap, I was initially thinking of starting from scratch but then figured it would be better to just start from the Calendar screen. And yes, if you can take it further, that would be awesome!

    I posted a v2 of this that allows users to toggle between Sunday and Monday as the first day of the week. Can easily be extended to incorporate other days if needed. So would suggest using that version to expand upon.

    Have been following all of your grear work! Would love to see new features added to this component.

    Thanks,
    Hardit Bhatia
  • R3dKap Profile Picture R3dKap 1,594
    Posted at
    Reusable Revamped Date Picker Control

    Hi @PowerAddict, nice job. It's funny, the past few days I was thinking of doing exactly the same thing: using the native calendar screen to make a component that would replace the existing OOTB date picker. You were just faster than me... 😁

    Maybe if I find some time, I will improve yours and add the few extended features you talk about at the end of your blog post...