MudDatePicker设置PickerVariant.Dialog后首次点击无法选中日期

安全阿岳

2026-6-30

MudDialog内MudDatePicker（PickerVariant.Dialog）首次选择无响应问题

问题说明

这是MudBlazor的已知兼容性问题，出现在MudDatePicker设置PickerVariant="PickerVariant.Dialog"并嵌套在MudDialog内的场景中。原因是双层对话框的模态机制干扰了组件状态同步，首次选择日期后绑定值未及时同步到视图，二次选择时状态才会正常更新。

保留PickerVariant.Dialog的解决方案

无需放弃对话框样式，可通过以下方式修复：

1. 手动触发状态刷新

在DateChanged事件中调用StateHasChanged()强制组件渲染，确保选中值及时显示：

<MudDatePicker @bind-Date="StartDate" PickerVariant="PickerVariant.Dialog" 
               DateChanged="() => StateHasChanged()" Label="开始日期" />
<MudDatePicker @bind-Date="EndDate" PickerVariant="PickerVariant.Dialog" 
               DateChanged="() => StateHasChanged()" Label="结束日期" />

2. 用EditForm管理表单状态

将控件包裹在EditForm中，借助Blazor的表单上下文自动同步状态：

<EditForm Model="@FormData">
    <MudDatePicker @bind-Date="FormData.StartDate" PickerVariant="PickerVariant.Dialog" Label="开始日期" />
    <MudDatePicker @bind-Date="FormData.EndDate" PickerVariant="PickerVariant.Dialog" Label="结束日期" />
</EditForm>

@code {
    private FormDataModel FormData { get; set; } = new();

    private class FormDataModel
    {
        public DateTime? StartDate { get; set; }
        public DateTime? EndDate { get; set; }
    }
}