Search code examples
.netblazormudblazor

Show MudBlazor DatePicker Overlay on Button click?

This might be a very specific thing I'm trying to do, but: My goal is to show this UI on a button click. I don't want to show the rest of the date picker component (which you usually click to trigger this overlay). See the full component here: https://mudblazor.com/components/datepicker#api

enter image description here

Any idea how to achieve this? Or if it's possible at all?

Solution

  • This is a very basic example that you should be able to adjust to your needs. Simply add a static picker to an overlay (or popup) component.

    <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="OpenOverlay">
    Show Picker
</MudButton>

<MudOverlay @bind-Visible="isVisible" DarkBackground="true" AutoClose="true">
    <MudDatePicker PickerVariant="PickerVariant.Static" Date="@(DateTime.Today.AddDays(1))" />
</MudOverlay>

    @code {
    private bool isVisible;

    public void OpenOverlay()
    {
        isVisible = true;
        StateHasChanged();
    }
}