如何点击按钮显示MudBlazor DatePicker弹出层？

可行性 #

完全可行，MudBlazor 的 DatePicker 组件提供了直接控制弹出层显示状态的参数，结合简单的 CSS 隐藏组件默认输入区域即可实现需求。

实现步骤 #

核心逻辑是：用独立按钮控制 DatePicker 弹出层的显示/隐藏，同时隐藏组件的默认输入部分，仅保留弹出层的交互逻辑。

完整代码示例 #

<MudButton OnClick="@ToggleDatePicker" Variant="Variant.Filled">
  选择日期
</MudButton>

<!-- 隐藏DatePicker输入区域，仅保留弹出层渲染逻辑 -->
<MudDatePicker 
  @bind-Date="@SelectedDate"
  Open="@IsDatePickerOpen"
  OnClose="@(() => IsDatePickerOpen = false)"
  Style="display: none;"
/>

@code {
  private DateTime? SelectedDate { get; set; }
  private bool IsDatePickerOpen { get; set; }

  private void ToggleDatePicker()
  {
    IsDatePickerOpen = !IsDatePickerOpen;
  }
}

关键细节说明 #

• 控制弹出状态：通过 Open 参数绑定 IsDatePickerOpen 变量，按钮点击时切换该变量值，直接触发弹出层的显示或隐藏。
• 隐藏输入区域：使用 Style="display: none;" 将 DatePicker 的输入框部分视觉隐藏，注意不能用 Hidden 属性完全移除组件（否则弹出层无法正常渲染）。
• 同步关闭状态：通过 OnClose 事件监听弹出层的手动关闭操作，及时重置 IsDatePickerOpen 变量，避免状态不一致。

可选优化：调整弹出层位置 #

如果需要自定义弹出层相对于按钮的位置，可以添加 AnchorOrigin 和 TransformOrigin 参数：

<MudDatePicker 
  @bind-Date="@SelectedDate"
  Open="@IsDatePickerOpen"
  OnClose="@(() => IsDatePickerOpen = false)"
  Style="display: none;"
  AnchorOrigin="Origin.BottomCenter"
  TransformOrigin="Origin.TopCenter"
/>

内容的提问来源于stack exchange，提问作者mr-woodapple