如何移除MudDataGrid日期列全局过滤器中的TimePicker

要在MudDataGrid的列过滤器中去掉时间选择器、仅保留日期选择，只需自定义目标日期列的过滤器模板，替换默认的日期时间选择组件为纯日期选择器即可，具体步骤如下：

1. 针对需要修改的日期列，添加<FilterTemplate>标签
2. 在模板内使用<MudDatePicker>组件替代默认过滤器，设置日期格式并开启清空功能

完整代码示例 #

<MudDataGrid T="Order" @bind-Items="Orders" Filterable="true">
    <Columns>
        <PropertyColumn Property="x => x.Id" Title="订单ID" />
        <PropertyColumn Property="x => x.OrderDate" Title="下单日期">
            <FilterTemplate>
                <!-- 自定义日期过滤器，仅显示日期选择 -->
                <MudDatePicker @bind-Date="@context.FilterValue" 
                               DateFormat="yyyy/MM/dd" 
                               Clearable="true"
                               Label="选择日期" />
            </FilterTemplate>
        </PropertyColumn>
        <PropertyColumn Property="x => x.Amount" Title="金额" />
    </Columns>
</MudDataGrid>

@code {
    private List<Order> Orders { get; set; } = new();

    protected override void OnInitialized()
    {
        // 模拟测试数据
        Orders = Enumerable.Range(1, 10).Select(i => new Order
        {
            Id = i,
            OrderDate = DateTime.Now.AddDays(-i),
            Amount = i * 100
        }).ToList();
    }

    public class Order
    {
        public int Id { get; set; }
        public DateTime OrderDate { get; set; }
        public decimal Amount { get; set; }
    }
}

关键说明 #

• 通过FilterTemplate完全接管列过滤器的UI，替换默认的日期时间选择器为MudDatePicker
• 设置DateFormat="yyyy/MM/dd"确保显示格式符合需求
• Clearable="true"允许用户清空过滤条件，恢复列的原始显示

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