Open date picker on button click

Question

I want to use the built in date picker or calendar date picker but without the default view - I have a page that displays a list of data for the selected month - I have a button that when clicked should display the controls for changing the month - I only want the button, not the selected date showing.

The UI is like below, the calendar button (top right) should open the datepicker. There doesn't seem to be a way to programmatically open this.

I can add a date picker to another page and display it within a content dialog but it doesn't look great.

It would be better if I could style the date picker to look like a button - but I can't find a way to do this.

Can anyone suggest any alternative approaches?

Answer 1

I think that what you are looking for is a DatePickerFlyout:

<Button Content="Choose date">
    <Button.Flyout>
        <DatePickerFlyout Date="{x:Bind ChosenDate, Mode=TwoWay}"/>
    </Button.Flyout>
</Button>

It will show the picker once you click the button. You can add the flyout to any control, however in some of them you will have to show it manually. With Button it will work automatically.