MudBlazor DataGrid：过滤日期时隐藏时钟图标

我在用MudDataGrid的时候，想只按日期过滤JoinedDate列，不想让过滤框里显示时间选择的时钟图标——那个图标占空间又没用，只留日历图标选日期就行。现在的代码是这样的：

<MudDataGrid Items="@_items">
    <Columns>
        <PropertyColumn Property="x => x.Name" />
        <PropertyColumn Property="x => x.JoinedDate" Title="JoinedDate" Format="dd/MM/yyyy" Filterable="true" />

    </Columns>
</MudDataGrid>

@code {

    public record Model (string Name, DateTime JoinedDate);

    ObservableCollection<Model> _items = new ObservableCollection<Model>()
    {
        new Model("Sal", new DateTime(2005, 3, 5)), 
        new Model("Ben",  new DateTime(2010, 1, 17)) 
    };
}

解决方法 #

直接给JoinedDate列自定义过滤模板，用MudDatePicker替代默认的带时间选择的组件就行，修改后的代码如下：

<MudDataGrid Items="@_items">
    <Columns>
        <PropertyColumn Property="x => x.Name" />
        <PropertyColumn Property="x => x.JoinedDate" Title="JoinedDate" Format="dd/MM/yyyy">
            <FilterTemplate>
                <MudDatePicker @bind-Date="@context.FilterValue" 
                               Label="选择日期" 
                               Variant="Variant.Outlined" 
                               Clearable="true" />
            </FilterTemplate>
        </PropertyColumn>
    </Columns>
</MudDataGrid>

@code {
    public record Model(string Name, DateTime JoinedDate);

    ObservableCollection<Model> _items = new ObservableCollection<Model>()
    {
        new Model("Sal", new DateTime(2005, 3, 5)),
        new Model("Ben", new DateTime(2010, 1, 17))
    };
}

说明

• 用FilterTemplate替换默认的过滤组件，MudDatePicker只处理日期，自然就没了时间选择的时钟图标
• @context.FilterValue直接绑定DataGrid的过滤值，不用额外写过滤逻辑
• 你可以根据自己的需求调整MudDatePicker的样式，比如去掉Label、改输入框样式之类的

内容的提问来源于stack exchange，提问作者BankMan101