Skip to main content
Microsoft logo
Power Apps
    • AI Builder
    • Automate processes
    • Azure + Power Apps
    • Build apps
    • Connect data
    • Pages
    • Take a guided tour
  • Pricing
    • Overview
    • Become a Partner
    • Find a Partner
    • Find partner offers
    • Partner GTM Resources
    • Blog
    • Customer stories
    • Developer Plan
    • Documentation
    • For IT Leaders
    • Roadmap
    • Self-paced learning
    • Webinars
    • App development topics
    • Overview
    • Issues
    • Give feedback
    • Overview
    • Forums
    • Galleries
    • Submit ideas
    • User groups
    • Register
    • ·
    • Sign in
    • ·
    • Help
    Go To
    • Power Apps Community
    • Welcome to the Community!
    • News & Announcements
    • Get Help with Power Apps
    • Building Power Apps
    • Microsoft Dataverse
    • AI Builder
    • Power Apps Governance and Administering
    • Power Apps Pro Dev & ISV
    • Power Apps Portals
    • Connector Development
    • Power Query
    • GCC, GCCH, DoD - Federal App Makers (FAM)
    • Power Platform Integration - Better Together!
    • Power Platform Integrations
    • Power Platform and Dynamics 365 Integrations
    • Community Blog
    • Power Apps Community Blog
    • Galleries
    • Community Connections & How-To Videos
    • Community App Samples
    • Webinars and Video Gallery
    • Canvas Apps Components Samples
    • Kid Zone
    • Emergency Response Gallery
    • Events
    • 2021 MSBizAppsSummit Gallery
    • 2020 MSBizAppsSummit Gallery
    • 2019 MSBizAppsSummit Gallery
    • Community Engagement
    • Community Calls Conversations
    • Experimental
    • Error Handling
    • Power Apps Experimental Features
    • Community Support
    • Community Accounts & Registration
    • Using the Community
    • Community Feedback
    cancel
    Turn on suggestions
    Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
    Showing results for 
    Search instead for 
    Did you mean: 
    • Power Apps Community
    • Galleries
    • Canvas Apps Components Samples
    • Reusable Revamped Date Picker Control

    Reusable Revamped Date Picker Control

    03-22-2020 23:13 PM - last edited 12-17-2021 14:25 PM

    Super User PowerAddict
    Super User
    4902 Views
    LinkedIn LinkedIn Facebook Facebook Twitter Twitter
    PowerAddict
    Super User PowerAddict
    Super User
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    Reusable Revamped Date Picker Control

    ‎03-22-2020 11:13 PM

    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

     

    Preview file
    119 KB
    Date Picker Component.zip
    Date Picker Component.msapp
    Labels:
    • Labels:
    • Featured
    Message 1 of 3
    4,902 Views
    5 Kudos
    Reply
    • All forum topics
    • Previous Topic
    • Next Topic
    R3dKap
    Super User R3dKap
    Super User
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎03-24-2020 03:40 PM

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

    Message 2 of 3
    4,829 Views
    2 Kudos
    Reply
    PowerAddict
    Super User PowerAddict
    Super User
    In response to R3dKap
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎03-24-2020 10:24 PM
    @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
    Message 3 of 3
    4,817 Views
    0 Kudos
    Reply

    Power Platform

    • Overview
    • Power BI
    • Power Apps
    • Power Pages
    • Power Automate
    • Power Virtual Agents

    Browse

    • Sample apps
    • Services

    Downloads

    • Windows
    • iOS
    • Android

    Learn

    • Documentation
    • Support
    • Community
    • Give feedback
    • Blog
    • Partners

    • © 2023 Microsoft
    • Follow Power Apps
    • Privacy & cookies
    • Manage cookies
    • Terms of use
    • Trademarks
    California Consumer Privacy Act (CCPA) Opt-Out Icon Your California Privacy Choices