Blazor InputDate设置min/max日期后Chrome显示异常求助

架构老林

2026-7-27

解决方案

一、让字段初始为空

将绑定的ViewModel.DateTo类型改为可空DateTime（DateTime?），默认值即为null，InputDate会保持空白直到用户选择日期：

// 调整ViewModel中的字段定义
public DateTime? DateTo { get; set; }

二、修复Chrome下的日期显示异常

同时设置min和max时Chrome显示格式错误，是Blazor InputDate组件与Chrome日期控件的格式交互冲突导致，可通过以下两种方式解决：

方法1：强制指定InputDate显示格式

直接在组件上添加FormatString属性，固定显示格式：

<InputDate @bind-Value="@ViewModel.DateTo" class="form-control"
           min="@datetoMin.ToString("yyyy-MM-dd")" 
           max="@datetoMax.ToString("yyyy-MM-dd")"
           FormatString="yyyy-MM-dd" />

方法2：统一页面区域文化设置

在页面<head>中添加区域配置的meta标签，引导Chrome使用正确的日期解析规则：

<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="language" content="zh-CN" />

或者在组件的初始化逻辑中设置线程文化：

protected override void OnInitialized()
{
    var culture = new System.Globalization.CultureInfo("zh-CN");
    System.Threading.Thread.CurrentThread.CurrentCulture = culture;
    System.Threading.Thread.CurrentThread.CurrentUICulture = culture;
}