如何在MudBlazor DatePicker中用颜色高亮指定日期？

MudBlazor的MudDatePicker支持通过**DayTemplate自定义日期单元格渲染**，这正是实现条件高亮的核心。以下是具体实现步骤：

1. 定义需要高亮的日期集合（比如不可用的房间日期）

// 示例：存储不可用日期的集合，可从业务接口获取
private List<DateTime> _unavailableDates = new List<DateTime>
{
    new DateTime(2024, 5, 10),
    new DateTime(2024, 5, 15),
    new DateTime(2024, 5, 20)
};

private DateTime _selectedDate;

2. 使用DayTemplate自定义日期单元格
   通过模板判断当前日期是否符合高亮条件，然后渲染带样式的日期：

<MudDatePicker @bind-Date="_selectedDate" Label="选择入住日期">
    <DayTemplate>
        <div style="width:100%; height:100%; display:flex; align-items:center; justify-content:center; border-radius:4px;">
            <span style="@GetDateStyle(context.Date)">
                @context.Date.Day
            </span>
        </div>
    </DayTemplate>
</MudDatePicker>

3. 实现条件样式逻辑
   根据日期是否不可用返回对应的CSS样式：

private string GetDateStyle(DateTime date)
{
    var isUnavailable = _unavailableDates.Any(d => d.Date == date.Date);
    return isUnavailable 
        ? "background-color:#ffcccc; color:#dc3545; font-weight:bold;" 
        : "";
}

扩展优化 #

• 可以用MudBlazor内置的Color枚举和组件（比如MudChip）来统一风格，替代自定义CSS：

<DayTemplate>
    <MudChip Size="Size.Small" 
             Color="@(_unavailableDates.Any(d => d.Date == context.Date.Date) ? Color.Error : Color.Default)"
             Variant="@(_unavailableDates.Any(d => d.Date == context.Date.Date) ? Variant.Filled : Variant.Text)"
             Style="width:100%; height:100%; justify-content:center;">
        @context.Date.Day
    </MudChip>
</DayTemplate>

• 如果使用MudDateRangePicker，同样可以通过DayTemplate实现范围外的日期高亮。

关键注意事项 #

• 日期比较时务必使用Date属性（忽略时间部分），避免因时间戳差异导致判断错误。
• 样式可以根据业务需求调整，比如用不同颜色区分“已预订”“不可用”“可选”等状态。

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